Open alex-willi opened 1 year ago
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>
<div>
{sevenDay && <Forecast7 {...data} />}
</div>
<button className="seven" onClick={() => { handleDay(); setThreeDay(false); setCurrentDay(false); }} disabled={sevenDay ? true : false} > 7 Day </button>
<button className="seven" onClick={() => { handleDay(); setThreeDay(false); setCurrentDay(false); }} disabled={sevenDay ? true : false} >
</button>
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>