I am undertaking one of the projects from frontendmentor.io

Whenever I click any of the mapped data, with the help of react-router-dom I am redirecting it to url/countryName.

In this scenario, I am using react-router-dom to fetch a particular country while using the useLocation hook to fetch the url, the problem is everything works fine in the first render but as soon as I reload the website the application breaks. No matter how many times I try it never renders again.

import axios from 'axios'
import React,{ useEffect,useState } from 'react'
import { useNavigate, useLocation } from 'react-router-dom'

const Country = () => {
  const location = useLocation()
  const name = location.pathname.split('/')[1]
  const navigate = useNavigate()
  const [country,setCountry] = useState({})

  useEffect(() => {
    const getCountry = async() => {
      try {
        const res = await axios.get(`https://restcountries.com/v3.1/name/${name.toLowerCase()}?fullText=true`)
        console.log(res.data,res)
        setCountry(res.data)
      } catch (error) {
        console.log(error)
      }
    }
    getCountry()
  }, [name])

  console.log(country[0].name.common) // returns undefined after reload

  const backButton = (event) => {
    event.preventDefault()
    navigate('/')
  }

  return (
    <div className='country-page page'>
      <button onClick={backButton} className='backButton'>back button</button>
      <div className='country-page-layout'>
        <h2></h2>
      </div>
    </div>

  )
}

export default Country

Other resources:

• error message screenshot
• API which I am using : https://restcountries.com/

CodePudding user response：

You need to wait for your data to be fetched first, and then render it.

const [country,setCountry] = useState({})
//country is an empty object 


//but here, your are trying to get the value from the array. (But country is an empty object)

 console.log(country[0].name.common) // returns undefined after reload

The solution is to check if your data is here first

if (country?.[0]?.name?.common){
 console.log(country[0].name.common)
}