I try to only display the next 5 hours based on the current time in my weather app, but I don't know how do this.
This is my code:
<div className="hour_forecast_container">
{weatherData.forecast.forecastday[0].hour.map((i) => (
<div>
<div className="hour_container">
<div>
<p key={i.temp_c}>{i.temp_c}°C</p>
<img src={i.condition.icon} height={"28px"} width={"28px"}/>
<p key={i.time}>{convertDate(i.time)}</p>
</div>
</div>
</div>
))}
</div>
(the time is a type string).
Answer
You're on the right track! If you want to only show the next 5 hours from the current time, you need to filter your forecast data based on the current hour.
Here's how you can do it step-by-step:
Add this logic before the return statement in your React component:
const currentHour = new Date().getHours();
const nextFiveHours = weatherData.forecast.forecastday[0].hour.filter((hourData) => {
const forecastHour = new Date(hourData.time).getHours();
return forecastHour >= currentHour && forecastHour <= currentHour + 5;
});