stuck in a promise and returns null

Question

Hi im trying so set String to data i have fetched. The problem is it is stuck in a promise and returns null before the state can be updated. I am lost as to how I can make sure the data is there before it accesses the data. Any help would be much appreciated. thanks

import React, {useState,useEffect} from 'react'
import {useParams} from 'react-router-dom'
import Header from '../components/header.js'
import{BsArrowLeft} from 'react-icons/bs'

const Country = () => {
    const {countryName} = useParams();
    const [country,setCountry] = useState(countryName);
    const [details,setDetails] = useState(null);
    const [string,setString] = useState(null);


    

    useEffect( () => {
        async function fetchData(){
        const res = await fetch(`https://restcountries.com/v3.1/name/${country}`)
        const data = await res.json()
        setDetails(data)  
        setString(Object.keys(data.currencies).toString())
    }
        fetchData() 
    }, [country])
    
        

    
    return (
        
            
                
                
                    
                
                {details && details.map((data,index) => 
                
                    
                    
                        {data.name.common}
                        Official Name: {data.name.official}
                        Population: {data.population}
                        Region: {data.region}
                        Sub Region: {data.subregion}
                        Capital: {data.capital}
                        Top Level Domain: {data.tld}
                        Currencies: {data.currencies[string].name}
                        Languages: 
                        Border Countries:
                        

                    
                )}
            
        
        
    );
}

export default Country;

Wazeed · Accepted Answer

The problem seems to be with the currency key string accessing code in useEffect(). Based on the data returned from the API, the currencies information can be accessed with below code. This works good when only single currency is returned for a country.

    // setString(Object.keys(data.currencies).toString());
    setString(Object.keys(data[0] && data[0].currencies || {}).toString());

stuck in a promise and returns null

Answers (2)

Related Questions