Home > Enterprise >  Why my scss styles aren't working on ternary expression
Why my scss styles aren't working on ternary expression

Time:10-13

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.

  • Related