How to get 5 day weather forecast using React Hooks and OpenWeatherMap API - reactjs

Question

So I want to be able to show the 5 day weather forecast for a chosen city, using the OpenWeatherMap API and React.
I've seen a few tutorials online but they all use Class components, I want to use mine using a functional Component and the UseState hook.
I have this working code which allows me to get the CURRENT weather,location name and displays a little weather icon.
I want to be able to get the info for 5 days, and put it into a list. Specificially I want the high, low, main, description and an icon, for each day.
I'm really inexperienced at making API calls so I'm struggling to figure it out. I have my API key, and I think my API call should look something like this
https://api.openweathermap.org/data/2.5/weather?q=${placename},IE&appid=${apiKey}&units=metric
where placename is a prop I pass to it, and IE is my country code.
I was looking at this tutorial which does what I want, but it uses class-based components instead. I can't figure out how to do it without using classes.
https://medium.com/#leizl.samano/how-to-make-a-weather-app-using-react-403c88252deb
If someone could show me how to do this, that would be much appreciated. Here is my current code that gets just the current temperature.
export default function Weather (props) {
// State
const [apiData, setApiData] = useState({});
const [state, setState] = useState('Belfast');
var placename = props.placeprop
// API KEY AND URL
const apiKey = process.env.REACT_APP_API_KEY;
const apiUrl = `https://api.openweathermap.org/data/2.5/weather?q=${placename},IE&appid=${apiKey}&units=metric`;
useEffect(() => {
fetch(apiUrl)
.then((res) => res.json())
.then((data) =>
setApiData(data),);
}, [apiUrl]);
return (
<div className="weather">
<div>
{apiData.main ? (
<div>
<img
src={`http://openweathermap.org/img/w/${apiData.weather[0].icon}.png`}
alt="weather status icon"
/>
<br/>
{apiData.name}
<br/>
{apiData.main.temp}° C
</div>
)
: (
<h1>Loading</h1>
)}
</div>
</div>
)
} ```

Answer 1

This is not a complete answer but I came across this question so I'm sharing what I have.
import React, {useEffect, useState} from 'react';
import css from './Weather.module.css';
function useOpenWeather ({apiKey, lat, lon, units = 'metric'}) {
const [apiData, setApiData] = useState(null);
const apiUrl = `https://api.openweathermap.org/data/2.5/onecall?lat=${lat}&lon=${lon}&appid=${apiKey}&units=${units}`;
useEffect(() => {
fetch(apiUrl)
.then((res) => res.json())
.then((data) => {
setApiData(data);
});
}, [apiUrl]);
return apiData;
}
function Weather ({lat, lon}) {
const weather = useOpenWeather({
apiKey: API_KEY
lat,
lon,
units: 'imperial'
});
return (
<div className={css.weather}>
{weather && weather.daily.slice(0, 5).map(d => (
<div>
<img
src={`http://openweathermap.org/img/w/${d.weather[0].icon}.png`}
alt={d.weather[0].main}
/>
<div>{d.temp.max} / {d.temp.min}</div>
</div>
))}
</div>
);
}
export default Weather;
.weather {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
grid-gap: 16px;
margin: 16px;
}