WeatherApp.jsx

import { useState } from "react";
import InfoBox from "./ui/InfoBox";
import SearchBox from "./ui/SearchBox";
import "./WeatherApp.css";

const WeatherApp = () => {
  /* 
  const [weatherInfo, setWeatherInfo] = useState({
    city: "Delhi",
    feelsLike: 24.84,
    temp: 25.05,
    tempMin: 25.05,
    tempMax: 25.05,
    humidity: 47,
    weather: "haze",
  });
  */

  // Initialize state properly in WeatherApp
  const [weatherInfo, setWeatherInfo] = useState(null);

  const updateWetherInfo = (result) => {
    setWeatherInfo(result);
  };

  return (
    <div className="WeatherApp">
      <h2>Meghya : Search for the Weather!</h2>
      <SearchBox updateInfo={updateWetherInfo} />
      {/* and render conditionally: */}
      {weatherInfo && <InfoBox info={weatherInfo} />}
    </div>
  );
};

export default WeatherApp;