[SOLVED] How to consume the Open Weather App API in react

How to consume the Open Weather App API in react

I have been trying to fetch from the Open Weather API but an error message kept appearing on the console. It returned 'unauthorized' and 'message: keys does not exist' after persistent tries.

fetch("https://community-open-weather-map.p.rapidapi.com/weather?callback=test&id=2172797&units=%22metric%22%20or%20%22imperial%22&mode=xml%2C%20html&q=London%2Cuk", {
            "method": "GET",
            "headers": {
                "x-rapidapi-host": "community-open-weather-map.p.rapidapi.com",
                "x-rapidapi-key": "15XXXXXXXXXXXXXXXXXX"
            }

Solution

I'm not sure why you are using rapidapi here, but if you simply want to fetch data from openweathermap, you need to do the following:

Sign up to get unique API key (free plan exist)
Provide the key as part of your URL, like:

http://api.openweathermap.org/data/2.5/forecast?id=524901&APPID={APIKEY}, When APIKEY is your unique API key

Also make sure you do not use the API key from the demos provided by open weather map, as it will result with errors when used from domain other than openweathermap, And tha if you're using a free plan, you're limited to maxium of 60 request per minute.

Check out the docs about how to get started with openweathermap.