React child component not rendering props from parent value

Question

I have a simple app that makes a call to a weather API and displays it in a child component.

App.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;

Card.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>
    )
}

Forecast.js

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

However, my Card component does not render the Forecast object attributes. I am not sure what I am doing wrong? The code seems very straightforward.

Answer 1

You pass props name props so you need to use props.props.iconLink in the Card component.

OR you can pass props like this:

<Card {...weatherCards[0]} />