React error 'Cannot read properties of undefined (reading 'map')'-CodePudding

So, in my code looks like setData works fine and gives the fetched data to my state. However it doesn't work at fist render. But if I cahange something in the code website will be rendered again and country name is gonna show up on the screen just how I wanted.

But this error keeps popping up: Uncaught TypeError: Cannot read properties of undefined (reading 'common')

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function Country() {
  const { countryName } = useParams();
  const [data, setData] = useState([]);
  const [country, setCountry] = useState({});

  useEffect(() => {
    fetch('https://restcountries.com/v3.1/all')
      .then(resp => resp.json())
      .then(datas => setData(datas));
  }, [])

  useEffect(() => {
    setCountry(data.find(a => a.name.common.toLowerCase() == countryName.replaceAll("-", " ")));
  }, [data])

  return (
    <>
      {
        <h1>{country.name.common}</h1>
      }
    </>
  )
}

export default Country

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

CodePudding user response：

It means that country.name is undefined (and not an object with common property).

On initial render country is {} (an empty object).

So, country.name returns undefined.

And undefined does not have common property. Hence, the error.

So, a good rule of thumb before accessing a property would be to check if that property even exists.

<h1>{country?.name?.common}</h1>

Most of the time, you don't want to display tags if there is no data.

So, you would like to do something like this.

Markup after && will be rendered only if expression before it, is truthy value.

{country?.name?.common && (
 <h1>{country.name.common}</h1>
)}

CodePudding user response：

As country initial value is an empty object, the name property will be undefined, which causes this error, You just need to set an initial value for name too, as an empty object

const [country, setCountry] = useState({ name: {} });

Full example of code.

import React, { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function Country() {
  const { countryName } = useParams();
  const [data, setData] = useState([]);
  const [country, setCountry] = useState({ name: {} });

  useEffect(() => {
    fetch('https://restcountries.com/v3.1/all')
      .then(resp => resp.json())
      .then(datas => setData(datas));
  }, [])

  useEffect(() => {
    setCountry(data.find(a => a.name.common.toLowerCase() == countryName.replaceAll("-", " ")));
  }, [data])

  return (
    <>
      {
        <h1>{country.name.common}</h1>
      }
    </>
  )
}

export default Country

Or you can optionally chain the name property.

<h1>{country.name?.common}</h1>

CodePudding user response：

I opened a new tab in Chrome and paste your api