Parsing JSON in react js

Question

I have recently starting at react js and trying my first demo website in react js which gets json data from https://covid19.mathdro.id website. for the simple case where json has single value such as confirmed cases, deaths etc, i am pulling and works fine. however when i am trying to pull countries data, i am having issue in mapping through the array of data. My Landing Page snipest

import React, { Component } from 'react';

import Country from './Country'
import Cases from './Cases';

class Landing_Page extends Component{
render(){
    return(
        <>
        <Cases />
        <Country />
        </>
    );
}
}
export default Landing_Page;

and here is my Country component

import React, { Component } from 'react';
import Axios from 'axios'
import 'antd/dist/antd.css'

class Country extends Component{
state=[
{
  country_name:"USA",
  country_code:"US"
},
]

componentDidMount(){
this.getCountries();
}
async getCountries(){
const res=await Axios.get('https://covid19.mathdro.id/api/countries');
console.log(res);
this.setState({
  country_name:res.data.countries.name,
  country_code:res.data.countries.code
});
}
render(){
return(
<div>
  {
    this.state.map(() => { 

    <li key={country_code} className={country_code}>{country_name}</li>
    })
  }
</div>
)
}
}
export default Country;

and here is the api link https://covid19.mathdro.id/api/countries

{
"countries":
[
{"name":"Afghanistan","iso2":"AF","iso3":"AFG"},
{"name":"Albania","iso2":"AL","iso3":"ALB"},
{"name":"Algeria","iso2":"DZ","iso3":"DZA"},
{"name":"Andorra","iso2":"AD","iso3":"AND"},
{"name":"Angola","iso2":"AO","iso3":"AGO"},
{"name":"Antigua and Barbuda","iso2":"AG","iso3":"ATG"}, 
{"name":"Argentina","iso2":"AR","iso3":"ARG"},
{"name":"Armenia","iso2":"AM","iso3":"ARM"},
{"name":"Australia","iso2":"AU","iso3":"AUS"},
{"name":"Austria","iso2":"AT","iso3":"AUT"},
{"name":"Azerbaijan","iso2":"AZ","iso3":"AZE"},
{"name":"Bahamas","iso2":"BS","iso3":"BHS"},
{"name":"Bahrain","iso2":"BH","iso3":"BHR"},
{"name":"Bangladesh","iso2":"BD","iso3":"BGD"},
{"name":"Barbados","iso2":"BB","iso3":"BRB"},
{"name":"Belarus","iso2":"BY","iso3":"BLR"},
{"name":"Belgium","iso2":"BE","iso3":"BEL"},
{"name":"Belize","iso2":"BZ","iso3":"BLZ"},
{"name":"Benin","iso2":"BJ","iso3":"BEN"},
{"name":"Bhutan","iso2":"BT","iso3":"BTN"},
{"name":"Bolivia","iso2":"BO","iso3":"BOL"},
{"name":"Bosnia and Herzegovina","iso2":"BA","iso3":"BIH"}, 
{"name":"Brazil","iso2":"BR","iso3":"BRA"},
{"name":"Brunei","iso2":"BN","iso3":"BRN"},
{"name":"Bulgaria","iso2":"BG","iso3":"BGR"},
{"name":"Burkina Faso","iso2":"BF","iso3":"BFA"},
{"name":"Burma"},{"name":"Cabo Verde"},
{"name":"Cambodia","iso2":"KH","iso3":"KHM"},
{"name":"Cameroon","iso2":"CM","iso3":"CMR"},
{"name":"Canada","iso2":"CA","iso3":"CAN"},
{"name":"Central African Republic","iso2":"CF","iso3":"CAF"}, 
{"name":"Chad","iso2":"TD","iso3":"TCD"},
{"name":"Chile","iso2":"CL","iso3":"CHL"},
{"name":"China","iso2":"CN","iso3":"CHN"},
{"name":"Colombia","iso2":"CO","iso3":"COL"},
{"name":"Congo (Brazzaville)"},
{"name":"Congo (Kinshasa)"},
{"name":"Costa Rica","iso2":"CR","iso3":"CRI"},
{"name":"Cote d'Ivoire"},
{"name":"Croatia","iso2":"HR","iso3":"HRV"},
{"name":"Cuba","iso2":"CU","iso3":"CUB"},
{"name":"Cyprus","iso2":"CY","iso3":"CYP"},
{"name":"Czechia","iso2":"CZ","iso3":"CZE"},
{"name":"Denmark","iso2":"DK","iso3":"DNK"},
{"name":"Diamond Princess"},
{"name":"Djibouti","iso2":"DJ","iso3":"DJI"},
{"name":"Dominica","iso2":"DM","iso3":"DMA"},
{"name":"Dominican Republic","iso2":"DO","iso3":"DOM"}, 
{"name":"Ecuador","iso2":"EC","iso3":"ECU"},
{"name":"Egypt","iso2":"EG","iso3":"EGY"},
{"name":"El Salvador","iso2":"SV","iso3":"SLV"},
{"name":"Equatorial Guinea","iso2":"GQ","iso3":"GNQ"}, 
{"name":"Eritrea","iso2":"ER","iso3":"ERI"},

and the list goes on.

I would much appreciate a solution to parsing/mapping above json. Thanks in advance

Error Screenshot

Here is my update code and snapshot

Answer 1

Change:

{
    this.state.map((country) => { 
    <li key={country.country_code} className={country.country_code}>{countrycountry_name}</li>
    })
 }

To:

{
    this.state.map((country) => (<li key={country.country_code} className={country.country_code}>{country.country_name}</li>)
    )
 }

you should return something here to render you component

Answer 2

  {
    this.state.map(() => { 

    <li key={country_code} className={country_code}>{country_name}</li>
    })
  }

You need to define arguments for the function you are passing into map.

As the Mozilla documentation for Array.map says:

Syntax

let new_array = arr.map(function callback( currentValue[, index[,
array]]) {

    // return element for new_array
}[, thisArg])

So above you want to change the function to look like:

  {
    this.state.map((country, optionalIndexArgument, optionalArrayArgument) => { 

    <li key={country.country_code} className={country.country_code}>{country.country_name}</li>
    })
  }