Glows Issue

[alex-willi]

Chaining ternary operators to display weather icon.

{data.daily.weathercode[0] === 0 ? (
sunny
) : data.daily.weathercode[0] === 3 ? (
cloudy
) : data.daily.weathercode[0] === 51 ||
53 ||
55 ||
61 ||
63 ||
65 ||
80 ||
81 ||
82 ? (
rainy
) : data.daily.weathercode[0] === 71 || 73 || 75 || 77 || 85 || 86 ? (
cloudy_snowing
) : (
<></>
)}

created functions and used state to make data invisible until a button is clicked and then makes all previously displayed data disappear and is replaced with the data associated with the button clicked

const [sevenDay, setSevenDay] = useState(false);

const handleDay = () => { setSevenDay((current) => !current); };

<div>
{sevenDay && <Forecast7 {...data} />}
</div>

<button className="seven" onClick={() => { handleDay(); setThreeDay(false); setCurrentDay(false); }} disabled={sevenDay ? true : false} >
7 Day
</button>