Custom Widgets Development Tutorials, Guides & Insights

To display the weather, create a Weather.js file:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const Weather = () => {
  const [weather, setWeather] = useState(null);

  useEffect(() => {
    const fetchWeather = async () => {
      try {
        const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=YOUR_CITY&appid=YOUR_API_KEY&units=metric`);
        setWeather(response.data);
      } catch (error) {
        console.error("Error fetching the weather data:", error);
      }
    };

    fetchWeather();
  }, []);

  return (
    <div>
      {weather ? (
        <div>
          <h4>{weather.name}</h4>
          <p>{weather.weather[0].description}</p>
          <p>{weather.main.temp}°C</p>
        </div>
      ) : (
        <p>Loading weather...</p>
      )}
    </div>
  );
};

export default Weather;