import Info from "./components/Info";
import Search from "./components/Search";
import axios from "axios";
import { useEffect, useState } from "react";

const App = () => {

  const API_KEY = `<REDACTED>`
  const baseURL = `http://api.weatherapi.com/v1/current.json?key=${API_KEY}&q=`

  const [weatherData, setWeatherData] = useState({})
  const [search, setSearch] = useState('London')
  const [error, setError] = useState('')

  useEffect(() => {
    axios.get(`${baseURL + search}`)
      .then(resp => {
        setWeatherData(resp.data)
      })
      .catch(error => setError(error.message))
  }, [search])

  console.log(weatherData.location.name);

  return (
    <div className="App">
      <h1 style={{ textAlign: 'center', marginBottom: '2rem' }}>{error}</h1>
      <Search setSearch={setSearch} />
      <div className="container">
        <Info weatherData={weatherData} />
      </div>
    </div>
  );
}

export default App;

I'm trying to create a weather app in react. I'm using the weather API that you can see in the code (maybe you should take a look at the API structure also). When I console log weatherData.location I get the normal weather data. But when I try weatherData.location.name I get the error that says: Uncaught TypeError: Cannot read properties of undefined (reading 'name'). I've started learning React two weeks ago so I'm still a beginner... Thank you.