Actualmente, solo puedo extraer información cuando el nombre del país ya está cargado, agrego el código, lo guardo y luego se actualiza en localhost. Pero cuando escribo en otro país, aparece el error Uncaught TypeError: Cannot read properties of undefined (reading 'temp') . Por ejemplo, mi código {weather.main.temp} funciona pero solo cuando el estado = "francia" ya está configurado antes.

Mi subcomponente:

 const WeatherInfo = ({ country }) => { const [weather, setWeather] = useState({}); useEffect(() => { axios .get(`https://api.openweathermap.org/data/2.5/weather?q=${country.capital}&appid=${api_key}&units=imperial`) .then(response => { console.log(response.data) setWeather(response.data) }) }, [country]) return ( <div> <h3>Weather in {country.capital}</h3> <p><b>Temperature</b>{weather.main.temp}</p> </div> ) }