In an attempt to understand how to use external API's as well as react hooks for state management, I built a simple weather application using react hooks and the open weather map API (https://openweathermap.org/api), it was a really educative experience.
Here's how i built the application:
Due to the simplicity of the application we would not bother ourselves with the styling of the application only the functionality.
First we declare the hooks we want to use for the state:
After which we create a getWeather function which set's the state of the parameters I wanted to get from the API. Here's the code which is embedded in the App.js:
.
After setting the state we now attempt to pass them down as props to our Weather and Form component:
.
Going inside the Weather component, we have our passed down props to the Weather Component which we use to dictate what/how the data would be displayed on the web page, this component looks like this:
.
With these we're almost done with our application, remaining our Form component and what it looks like on the web.
The very simple Form component looks something of the nature:
.
And finally we get to see what our app looks like after we've completed the project.
.
The styling of this project can be done in any form or style as the reader wishes. My CSS is not the best, so i just did a simple styling for the application.
This is what the folder structure looks like for anyone interested.
.
Here's a link to the project on github: https://github.com/sammieeblaq/weather-app
This is my first ever blog post, so please like and leave a comment for feedback. Thank you
For further actions, you may consider blocking this person and/or reporting abuse
Top comments (2)
Hi thanks, such a great tutorial. What if I need to display the current weather of other cities, like not based on my current location but for other cities
Hi Drukey, If you still interested you'd find the answer to your question in my github project: github.com/aminawinti/the-weather-... ...and of course THANKS SAMUEL for the post, very helpful ^_^