I am currently attempting to convert Celsius into Fahrenheit within this specific div. Despite being fairly new to React, I’m finding it challenging to determine where exactly to place the conversion calculation.
return (
<div className="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.main != "undefined") ? (<div>
<div className='location-box'>
<div className='location'>{weather.name}, {weather.sys.country}</div> <div className='date'>{dateBuilder(new Date())}</div>
</div>
<div className="weather-box">
<div className="celsius-temp">{Math.round(weather.main.temp)}°C </div>
<div className="fahrenheit-temp">{Math.round(weather.main.temp)}°F </div>
<div className="weather">{weather.weather[0].main} </div>
</div>
</div>
) : ('')}
</main>
</div>
)
The goal is to display two values for temperatures: one in Celsius (retrieved from the weather API) and another in Fahrenheit (converted from the Celsius value).
I attempted to perform ({Math.round(weather.main.temp)} * 9/5) + 32 within the element, but encountered issues as shown in the image provided. Should I consider defining a constant value within the function at the top or inside the function App()?
Your assistance would be greatly appreciated.