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

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}&deg; C
          </div>

        )

         : (
          <h1>Loading</h1>
        )}
      </div>
    </div>
    


    )


} ```

question from:https://stackoverflow.com/questions/65920047/how-to-get-5-day-weather-forecast-using-react-hooks-and-openweathermap-api

Answer 1

Waitting for answers