Can anyone shed some light on why my scss styles do not work on code that is displayed based on a ternary expression? I have pasted the styling code and component. I have also tried adding the style inline but that didn't work either and I would really rather avoid that if possible.
import React, {useState} from 'react';
import Axios from 'axios';
import '../Styles/City.css';
const City = () => {
const [city, setCity] = useState();
const [airQuality, setAirQuality] = useState();
let rand;
const randomNum = () => {
const min = 0;
const max = 100;
rand = min Math.floor(Math.random() * (max - min));
console.log(rand)
}
const getCity = () => {
Axios.get(`https://api.openaq.org/v1/measurements?country=GB`).then((response) => {
console.log(response)
setCity(response.data.results[rand].city)
setAirQuality(response.data.results[rand].value)
})
}
return (
<div className="city-data-wrapper">
{city ? <div className="data-conatiner" >
<span className="city">City: {city}</span>
<span className="air-quality">Air Quality: {airQuality} </span>
</div> : <span>Click the button</span>}
<button className="btn" onClick={() => {randomNum(); getCity();}}>Get Random City</button>
</div>
);
};
export default City;
css
@import '../Styles/Variables/variables.scss';
.App {
@include cardStyles();
}
.city-data-wrapper {
display: flex;
flex-direction: column;
align-items: center;
}
.data-container {
display: flex;
flex-direction: column;
line-height: 2rem;
border: 3px solid purple;
border-radius: 6%;
padding: 1rem;
margin: 2rem;
}
.btn{
@include buttonStyle();
}
CodePudding user response:
You are importing City.css, is it ok? Or is it City.scss
CodePudding user response:
Typo in the class name. My inability to spell will one day be the death of me.