Can not set initial data to child component because it is undefined on page load

Question

I have 5 cities and their weather displayed on a card on page load, when you click a city I want more details to appear on another card but the detailed card needs to have initial data of the first city from the first card but I can't seem to get it to work. The problem is data is undefined on page load I guess so I'm not sure how I can display it? My guess is I have to conditionally load the detailed card when data is defined but I'm not sure how to write it.

Parent

const fetchCity = async (city) => {
    const res = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}`);

    return {
        description: res.data.weather[0].description,
        icon: res.data.weather[0].icon,
        temp: res.data.main.temp,
        city: res.data.name,
        country: res.data.sys.country,
        id: res.data.id,
    };
};

function App() {
    const [data, setData] = useState([]);

    const [activeWeather, setActiveWeather] = useState([]);

    useEffect(() => {
        const fetchCities = async () => {
            const citiesData = await Promise.all(["Ottawa", "Toronto", "Vancouver", "California", "London"].map(fetchCity)).catch((err) => {
                console.log("error:", err);
            });

            setData((prevState) => prevState.concat(citiesData));
        };

        fetchCities();
    }, []);

    const handleClick = (event) => {
        const weather = JSON.parse(event.target.dataset.value);
        setActiveWeather(weather);
    };

    return (
        <div className="App">
            <Header />
            <Container>
                <Row>
                    <Col>
                        <WeatherPanel data={data} handleClick={handleClick} />
                    </Col>
                    <Col>
                        //Probably where I have conditionally render?
                        <ActiveWeather activeWeather={activeWeather} data={data[0]} />
                    </Col>
                </Row>
            </Container>
        </div>
    );
}

export default App;

Detailed Card

import React, { useEffect, useState } from "react";
import { Container, Card } from "react-bootstrap";

const ActiveWeather = (props) => {
    const [weather, setWeather] = useState(props.data);

    console.log("props", props);

    useEffect(() => {
        setWeather(props.activeWeather);
    }, [props.activeWeather]);

    console.log(weather);
    return (
        <Container>
            <Card>
                <Card.Header> {weather?.city}</Card.Header>
                {weather?.temp}
            </Card>
        </Container>
    );
};

export default ActiveWeather;

Initial Card

const WeatherPanel = (props) => {
    return (
        <div>
            <Container fluid>
                <Card style={{ boxShadow: "0  0  10px 2px lightgrey" }}>
                    <Card.Header> Favorite Location</Card.Header>
                    <ListGroup variant="flush">
                        <ListGroup.Item>
                            {props.data.map((item) => (
                                <ListGroup.Item key={item.id} data-value={JSON.stringify(item)} onClick={props.handleClick}>
                                    <img src={`http://openweathermap.org/img/wn/${item.icon}@2x.png`} alt="Weather Icon" />
                                    {item.city + ", " + item.country}
                                </ListGroup.Item>
                            ))}
                        </ListGroup.Item>
                    </ListGroup>
                </Card>
            </Container>
        </div>
    );
};

export default WeatherPanel;

or maybe you can just check inside the Detail Card component, if the ```props.weatherActive``` has its ```length```, then you return the component. else return ```null``` — Raden Kriting, Jul 05 '21 at 17:50
I thought that would work but my useEffect is overwriting the state with and empty array now, so i put and if statement in useEffect...if (props.activeWeather.length > 0) but now state wont update when clicked it just stays with the initial data and I'm not sure why — zer0day, Jul 05 '21 at 18:17
You don't have to set any ```useEffects``` to use props inside the children. the props that passed from inheritance, will automatically re-render the children components on itself. what you have to do is, make sure the component is not broken when the data is not satisfied your condition. — Raden Kriting, Jul 05 '21 at 18:19
every time the ```data``` passed from parent component to its own children has changed. React will automatically re-render the whole components. You don't have to worry about setup another ```useEffects``` on every child you passed the data. — Raden Kriting, Jul 05 '21 at 18:24
How can I set the state of weather without using `useEffect` though? If I remove it and try to set the state it will give me **Too many re-renders. React limits the number of renders to prevent an infinite loop.** — zer0day, Jul 05 '21 at 18:31
what I meant was, if I see your code, you set another ```useEffect``` in detail Card component. that was unnecessary. You're assigned the changes of the props to be used as a local state with ```useState```. Ofc, you have to use ```useEffect``` at the time you're using fetch, which in ```App.js``` or react will complaint about it. — Raden Kriting, Jul 05 '21 at 18:36
if remove the `useEffect` in the child detailed card and just put `setWeather(props.activeWeather);` it will give the the too many re-renders error. — zer0day, Jul 05 '21 at 18:45

score 0 · Accepted Answer · edited Jul 05 '21 at 19:03

As you stated, that the data at the first render was undefined. You can conditionally render the Detail Component at parent like this:

function App() {
  const [data, setData] = useState([]);

  const [activeWeather, setActiveWeather] = useState([]);

  useEffect(() => {
    const fetchCities = async () => {
      const citiesData = await Promise.all(
        ['Ottawa', 'Toronto', 'Vancouver', 'California', 'London'].map(
          fetchCity
        )
      ).catch(err => {
        console.log('error:', err);
      });

      setData(prevState => prevState.concat(citiesData));
    };

    fetchCities();
  }, []);

  const handleClick = event => {
    const weather = JSON.parse(event.target.dataset.value);
    setActiveWeather(weather);
  };

  return (
    <div className="App">
      <Header />
      <Container>
        <Row>
          <Col>
            <WeatherPanel data={data} handleClick={handleClick} />
          </Col>
          <Col>
            // Since you want to prevent the undefined to passed to children
            // You need conditionally render OR conditionally passed the data

            // #1 conditionally render
            // check the length of the weather
            {activeWeather.length && 
            <ActiveWeather activeWeather={activeWeather} data={data[0]} />}

            // #2 conditionally pass the data
            <ActiveWeather activeWeather={activeWeather || []} data={data[0] || []} />
          </Col>
        </Row>
      </Container>
    </div>
  );
}

export default App;

and in Detail Card your code will be better like this

import React, { useEffect, useState } from "react";
import { Container, Card } from "react-bootstrap";

const ActiveWeather = (props) => {
    return (
        <Container>
            <Card>
                <Card.Header> {props?.weather?.city}</Card.Header>
                {props?.weather?.temp}
            </Card>
        </Container>
    );
};

export default ActiveWeather;

Okay, I got it to work with your help. I conditionally rendered the child component in App.js with `{data.length && }` and then in the child component I rendered it with `{props.activeWeather.city ? props.activeWeather.city : props.data?.city}` — zer0day, Jul 05 '21 at 19:31

Can not set initial data to child component because it is undefined on page load

1 Answers1