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.
Pasa el nombre de los props
, por lo que debe usar props.props.iconLink
en el componente Card
.
O puedes pasar accesorios como este:
<Card {...weatherCards[0]} />