Question 311076 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – Passing property from parent to child component in react not working as expected (newbie)

I have the following react component that works as expected.

Data is returned from the Api call to the forecasts variable and is displayed correctly as contents.

My WeatherCard is rendered with the props passed successfully.

import {useEffect, useState} from 'react';
import WeatherCard from './WeatherCard.jsx'
import './App.css';

function App() {
    const [forecasts, setForecasts] = useState();
    const headerTitle = "Sadisticus' Weather App";


    useEffect(() => {
        populateWeatherData();
    }, []);



    const contents = forecasts === undefined
        ? <p><em>Loading... Please refresh once the ASP.NET backend has started. See <a href="https://aka.ms/jspsintegrationreact">https://aka.ms/jspsintegrationreact</a> for more details.</em></p>
        : <table className="table table-striped" aria-labelledby="tabelLabel">
            <thead>
                <tr>
                    <th>Date</th>
                    <th>Temp. (C)</th>
                    <th>Temp. (F)</th>
                    <th>Summary</th>
                </tr>
            </thead>
            <tbody>
                {forecasts.map(forecast =>
                    <tr key={forecast.date}>
                        <td>{forecast.date}</td>
                        <td>{forecast.temperatureC}</td>
                        <td>{forecast.temperatureF}</td>
                        <td>{forecast.summary}</td>
                    </tr>
                )}
            </tbody>
        </table>;
    
    return (
        <>
            <div>
                <section className='App-header'>
                    <h2 id="tabelLabel">{headerTitle}</h2>
                </section>
                <p>This component demonstrates fetching data from the server.</p>
                {contents}
                <WeatherCard weather={{ Date: '1/12/2023', TemperatureC: '23' }} />
                <h2>Something</h2>
            </div>
        </>
    );
    
    async function populateWeatherData() {
        const response = await fetch('weatherforecast');
        const data = await response.json();
        setForecasts(data);
    }
}

export default App;

import './App.css';
import Avatar from './Avatar';
function Card({ children }) {
    return (
        <div className='card'>
            {children }
        </div>
    );
}
export default function WeatherCard({weather }) {
    return (
        <Card>
            <Avatar forecast={weather}/>
        </Card>    
    );
}

export default function Avatar({ forecast }) {
    return (
        <>
            <h2>{forecast.Date}</h2>
        <img    className='avatar'
                src='https://i.imgur.com/szV5sdG.jpg'
                alt="Image"
            />
            <p>{forecast.TemperatureC} (C)</p>
        </>
    );
}

this works as fine and the data is rendered as expected.

Now how do I use the variable forecasts to pass properties to the WeatherCard component?

ie:

<WeatherCard weather={forecast[0]} />

Actually, when I try this I get a blank page…

Tags:

2

Answers


  1. 0

    You can pass it similarly to your Avatar component. If you want to restructure it you can use the spread operator:

    <WeatherCard weather={...forcasts} />

    OR

    if it’s an array of data you will need to map it:

    forcasts.map((forcast)=>(<WeatherCard weather={forcast} />))
    Login or Signup to reply.
  2. 0

    You can pass the properties to the WeatherCard component only after you make sure that the forecasts is defined and not empty. You can check it by using conditional rendering to achieve this. Something like:

    // ...rest
{forecasts && forecasts.length > 0 && <WeatherCard weather={forecasts[0]} />}
//...remaining
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search