In this blog, we will be completing the weather app which we started in the previous blog in our React Tutorials | ULTIMATE MERN PLAYLIST series. So in this blog we are going to fetch the data from the OpenWeatherAPI and will be displaying it on our Weather App UI.
Fetching the Data from OpenWeatherApi
First of all we need a API Endpoint from where we will be sending the API request to OpenWeatherApi and getting the data.
The API Endpoint which we are going to use is :
const url = `https://api.openweathermap.org/data/2.5/weather?q=${location}&appid=${apiKey}`
Using the above API Endpoint we are going to fetch data from OpenWeatherApi.
If you want to visit the OpenWeatherAPI page then click here.
Starting with Fetching the Data from OpenWeatherApi
First of all, we are going to use 3 states which are weatherData, location and submitted .
We will declare all 3 useState in our App.js file.
After declaring all the states we need to install Axios using the following command,
npm install Axios
After installing Axios we will create a function namely fetchData which will be a Asynchronous Functions.
In this function we will be creating two variable namely apiKey and url for value of API Key and the API Endpoint respectively.
After creating the variables then we will be creating a try-catch block where will create res variable and await for the response from the API using axios.get(). And we will be setting the value of weatherData and submited using setWeatherData and setSubmitted respectively, if the try block fails then the catch block will be display the error.
After this we will need to display the data of the card section if the response form the API has been fetched. So, we will build this logic using Ternary Operator. If the data from API is not fetched then we need to print Please Enter the location.
As we are done with the logic we will now pass the data to child element of App which is MainSection using props .
We are done in the App.js.
As we pass the data form App to the MainSection, now we will destructure the props which was passed by the App .
The data which we pass form App to the MainSection is an String and an Object.
Now from this Object data we will dividing the data to each of our sections which are UpperSection, MiddleSection and LowerSection.
As we added all the props to our child components UpperSection, MiddleSection and LowerSection, we will now move to UpperSection.
Now we will be be destructuring all the props which we have passed to UpperSection.
Now we will display this data on our page.
Now we need to add the data to our page so we will be creating an object of Data() namely date, and using this object to access the year, month and day using getFullYera(), getMonth() and getDate().
Then we will be using join() to join all the 3 variables with - to display the date on our page.
We have added all the necessary data to our UpperSection. Now we will move on MiddleSection.
There are four pieces of data that we need to display on our page which are latitude, longitude, sunrise and sunset.
Now we will be destructuring all the props which we have passed to MiddleSection.
For latitude and longitude we will be displaying the data directly and for the sunset and sunrise we need to display the time but the data which the API gives is in UTC format so we need to convert it into our normal time using toLocaleTimeString().
We have added all the necessary data to our MiddleSection. Now we will move on LowerSection.
There are four pieces of data that we need to display on our page which are status, pressure, humidity and wind speed.
Now we will be destructuring all the props which we have passed to LowerSection.
We will be displaying the data directly on our page.
So, we are completed with the LowerSection of our Weather App.
So the final output will look like :
So, in this blog, we completed the Weather App in ReactJS and TailwindCSS. There is much more to learn about the use of TailwindCSS in ReactJS, explore this topic and its used cases and elevate your skills.
Adios Amigos 👋👋