I have list of countries, and i want to create grid, with items being the countries. I have 2 grids, first grid shows just the first country, the second grid shows the rest of them.

However the first grid complains about the object being undefined. Sometimes this code works but usually i get the error about not Cannot read properties of undefined (reading 'name'). Why is this happening? And why does the second grid does not complain? ( I even staticly declared the list of countries here, so its not like im waiting for some service to return the data)

const Countries = () => {
    const [countries, setCountries] = useState([])
    const tooltip = useRef(null);

    const tmpCountries = [{
        name: "country"
    }, {
        name: "country2"
    }, {
        name: "country3"
    }, {
        name: "country4"
    }, {
        name: "country5"
    }, {
        name: "country6"
    }, {
        name: "country7"
    }, {
        name: "country8"
    }, {
        name: "country9"
    }, {
        name: "country10"
    }, {
        name: "country11"
    }, {
        name: "country12"
    }, {
        name: "country13"
    }, {
        name: "country"
    }, {
        name: "country2"
    }, {
        name: "country3"
    }, {
        name: "country4"
    }, {
        name: "country5"
    }, {
        name: "country6"
    }, {
        name: "country7"
    }, {
        name: "country8"
    }, {
        name: "country9"
    }, {
        name: "country10"
    }, {
        name: "country11"
    }, {
        name: "country12"
    }, {
        name: "country13"
    }]

 useEffect(() => {
        const countries = tmpCountries;
        setCountries(countries);
    }, [])

   return (
        <div className="countriesHolder">
            <Typography variant="h3" component="h3">
                List of countries.
            </Typography>

            <div className="countries">
                <Grid container
                      direction="row"
                      rowSpacing={1}
                      spacing={{xs: 2, md: 3}} columns={{xs: 4, sm: 8, md: 12}}
                      alignItems="center"
                      justifyContent="center"
                >
                    <Grid item xs={4} sm={6} md={6} mt={5}>
                        {console.log(countries[0])}
                        <Item className="item">{countries[0].name}</Item>
                    </Grid>

                </Grid>

                <Grid container
                      direction="row"
                      rowSpacing={1}
                      spacing={{xs: 2, md: 3}} columns={{xs: 4, sm: 8, md: 12}}
                      alignItems="center"
                      justifyContent="center"
                >
                    {
                        countries.map((country, i) => {
                            if (i == 0) return;
                            return <Grid item xs={4} sm={6} md={6} mt={5}>
                                <Item className="item">{country.name}</Item>
                            </Grid>
                        })
                    }
                </Grid>
            </div>
        </div>
    )
}

is there some react bug im too green to notice? THanks for help!

CodePudding user response：

Initialize the countries state with tmpCountries:

const [countries, setCountries] = useState(tmpCountries)

You are trying to retrieve countries[0] on component render which is fist referencing the empty array; therefore, giving you an undefined value.

CodePudding user response：

When your component renders for the first time countries is still an empty list since the effect runs right after rendering. You try to access the first element with countries[0] but it doesn't exist yet so you get undefined and then try to access .name which doesn't work. Add optional chaining like so countries[0]?.name