Building a Dashboard with Dynamic Data Updates Using useEffect

This article is about building a Dashboard with Dynamic Data Updates using useEffect hook. In this project, I have used a weather API that fetches weather details of different cities. I took five cities fetched the weather data of each city in 6-second intervals and displayed the weather details on the dashboard.

Prerequisites:

• Reactjs
• React bootsrap
• React hooks

Approach:

• Install the required packages , we are using axios and react bootstrap. so install these packages.
• We are using two components a NavBar component and WeatherInfo component which has all the weather info of cities.
• The main code is in app.js file, in which we are fetching the weather data of each city within a interval and passing the weather data to weather info component as props.

Steps to create the project:

Step1: create the react app using the command

npx create-react-app weather-app
cd weather-app

Step2: Install the required dependencies

 npm install react-bootstrap bootstrap
npm install axios

Project Structure:

The updated dependencies in package.json file looks like this:

Example: To demonsrtate building a dashboard with dynamic data updates using useEffects.

To Start Project:

npm start

Output: