Tengo una aplicación simple que llama a una API meteorológica y la muestra en un componente secundario.

Aplicación.js

 import './App.css'; import { useState, useEffect } from 'react' import { Forecast } from './forecast' import Card from './components/Card' function App() { const apiURL = "https://weather.cc.api.here.com/weather/1.0/report.json?apiKey=XXXXX&product=forecast_7days&name=Berlin" const [weatherCards, setCards] = useState([]) useEffect(() => { const getWeather = async() => { var forecastList = [] const res = await fetch(apiURL) const data = await res.json() const forecasts = data.forecasts.forecastLocation.forecast for (let i = 0; i < 5; i++) { let iconLink = forecasts[i].iconLink let iconName = forecasts[i].iconName let utcTime = forecasts[i].utcTime let temperature = forecasts[i].temperature let forecast = new Forecast(iconLink, iconName, utcTime, temperature) forecastList.push(forecast) //console.log(forecastList) } setCards(forecastList) } getWeather() }, []) return ( <div > <h1>My Weather dashboard</h1> <div className="container"> <Card props={weatherCards[0]} /> </div> </div> ) } export default App;

Tarjeta.js

 const Card = ( props ) => { return ( <div className="card"> <img src={props.iconLink}/> <div className="caption">{props.iconName}</div> <h3>Day: {props.day}</h3> <h3>time: {props.time}</h3> <h3>temperature: {props.temperature}</h3> </div> ) }

Pronóstico.js

 export class Forecast { constructor(iconLink, iconName, utcTime, temperature) { this.iconLink = iconLink this.iconName = iconName this.utcTime = utcTime this.temperature =temperature } }

Sin embargo, mi componente Tarjeta no representa los atributos del objeto Pronóstico. No estoy seguro de lo que estoy haciendo mal? El código parece muy sencillo.