I need to explain this in React in simplest form
return (
<div className={(typeof weather.main != "undefined") ?
((weather.main.temp > 16) ?
'app warm' : 'app') : 'app'}>
<main>
<div className="search-box">
<input
type="text"
className="search-bar"
placeholder="Search..."
onChange={e => setQuery(e.target.value)}
value={query}
onKeyPress={search}
/>
</div>
{(typeof weather.daily != "undefined") ? (
<div>
<div className="location-box">
<div className="location">{weather.name},
{weather.country}</div><br />
{(saved.find(c => c.name === weather.name &&
c.country === weather.country) !== undefined) ? "" : <button
className="save" onClick={savelocation}>Save
Location</button>}
</div>
<ul className="days">
{weather.daily.map(day => {
return (
<li key={day.dt}>
<DayCard {...day} />
</li>
)
})}
</ul>
</div>
) : ('')}
<div className="savedlocations">
{(saved.length != 0) ? (
<span>Saved Locations</span>
) : ('')}
<ul id="saved">
</ul>
</div>
</main>
</div>
);
}
export default App;