Creación de una aplicación meteorológica en React JS utilizando OpenWeatherMapAPI. Lo que intento hacer es generar fondos dinámicos en función de la respuesta de la API.

El punto final de los datos que busco es 'data.weather[0].main' y mostrará el texto 'Clear', 'Cloudy', 'Rain', etc... Luego pasaré el valor como apoyo a mi componente con estilo para renderizar la imagen correspondiente. Aquí es donde obtengo el error: TypeError: No se pueden leer las propiedades de undefined (leyendo '0').

Sé que esto se debe a que es un niño anidado en el documento JSON. Todos los primeros niveles funcionan como "data.main" o "data.timezone".

He intentado lo siguiente y sigo teniendo el mismo error:

consola.log(datos?.tiempo[0] ? datos.tiempo[0].principal: '')

 const Weather = ({data}) => { // Error here console.log(data?.weather[0] ? data.weather[0].main : '') return ( // Error here <StyledContainer bg={data.weather[0].main}> <Title>Style me</Title> <Heading>{data.name}</Heading> </StyledContainer> ) }