Uncaught TypeError: Cannot read properties of undefined (reading 'common')

Question

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

const CountryDetail = () => {
    const {countryname}=useParams();
    const[countrydet,setCountry]=useState([]);
    useEffect(()=>{
        const url=`https://restcountries.com/v3.1/name/${countryname}`;
        fetch(url)
        .then(res=>res.json())
        .then(data=>setCountry(data))
    },[])
    return (
        
            
            This is country details : {countryname}
            {countrydet.name.common}
            {countrydet.continents}
            
        
    );
};

export default CountryDetail;

but there is a element in object {"name":{"common":"Bangladesh","official":"People's Republic of Bangladesh","nativeName":{"ben":{"official":"বাংলাদেশ গণপ্রজাতন্ত্রী","common":"বাংলাদেশ"}}}

user_13334252 · Answer

When the component first renders, the asynchronous API call and setting of state hasn't happened yet, so countrydet is undefined.

            This is country details : {countryname}
            {countrydet?.name?.common}
            {countrydet?.continents}

This should work, and here's the MDN reference for optional chaining.

or alternatively, you could wrap the whole block in a conditional, something like this:

            This is country details : {countryname}
            { countrydet?.name?.common && countrydet?.continent ? 
               <>
                 {countrydet?.name?.common}
                 {countrydet?.continents}
               
               :
               <>
             }

user_11818579 · Answer

Firstly, set an initial state for countrydet .
Then correctly unwrap the response from the fetch request. .then(([data]) => setCountry(data));
Check if the countryname parameter is set before executing the fetch request.
Check if countrydet is defined before trying to access it's properties.

const CountryDetail = () => {
  const { countryname } = useParams();
  const [countrydet, setCountry] = useState(undefined);

  useEffect(() => {
    if (countryname) {
      const url = `https://restcountries.com/v3.1/name/${countryname}`;
      fetch(url)
        .then((res) => res.json())
        .then(([data]) => setCountry(data));
    }
  }, [countryname]);

  return (
    
      This is country details : {countryname}
      {countrydet && (
        <>
          {countrydet.name.common}
          {countrydet.continents}
        
      )}
    
  );
};

Uncaught TypeError: Cannot read properties of undefined (reading 'common')

2 Answers