将道具传递给模态组件后无法访问对象内的数组

Question

i'm building this application with the help of the RestCountries Api to be able to show each country with basic details on a grid, and after a click on each box the app will show a modal with more detailed informations. That's my code so far:

class App extends React.Component{
  constructor (props){
    super (props);
    this.state={
      countries : [],
      clickedCountry: {},
      modalOn : false,


    }
  }



  componentDidMount(){
    axios.get(`https://restcountries.eu/rest/v2/all`)
    .then(res => {
      const data = res.data;


      this.setState({
        countries : data

      })


      let countries = this.state.countries
      console.log(countries);

       })



  }


  showInfo = (name) => {
    this.setState({
      clickedCountry : this.state.countries.find(it => it.name===name),
      modalOn : true

    });   
  }



  closeModal =()=>{
    this.setState({
      modalOn : false
    })
  }



  render() {
    return (
      <div  className="container">
      {this.state.countries.map(country=>
 <Country name={country.name}
                 key={country.name} 
                 population ={country.population} 
                 region={country.region}
                 capital={country.capital}
                 flag={country.flag}
                 showInfo={this.showInfo}
                 languages={country.languages}
                 />

      )}
      <div style={{display: this.state.modalOn? "block" : "none"}}>
        <Modal closeModal={this.closeModal} 
               name={this.state.clickedCountry.name} 
               population={this.state.clickedCountry.population}
               region={this.state.clickedCountry.region}
               capital ={this.state.clickedCountry.capital}
               flag={this.state.clickedCountry.flag}
               nativeName ={this.state.clickedCountry.nativeName}
               subregion={this.state.clickedCountry.subregion}
               topLevelDomain={this.state.clickedCountry.topLevelDomain}
               languages={this.state.clickedCountry.languages}
              />
      </div>

      </div>
    )
  }
}

Modal component :

const Modal = ({closeModal, name, population, region, capital, flag, languages, nativeName, subregion, topLevelDomain, currencies}) => {
    return (
        <div className="modal">
            <div className="modal-content">
                <span onClick={closeModal}>x</span>
            <div className="img">
               <img src={flag}/>
               </div> 
            <p>{name}</p>
            <p>Native name: {nativeName}</p>
            <p>population: {population}</p>
            <p>Region: {region}</p>
            <p>Sub Region: {subregion}</p>
            <p>Top level domain: {topLevelDomain}</p>
            <p>Capital: {capital}</p>

            </div>
            </div>

    )
}

So far for now i have mapped each country and the modal on click is showing more detailed informations. The problem now is the fact i need to access in the api an array that is nested inside an object:

area: 91
gini: null
timezones: ["UTC-04:00"]
borders: []
nativeName: "Anguilla"
numericCode: "660"
currencies: [{…}]
languages: [{…}]
translations: {de: "Anguilla", es: "Anguilla", fr: "Anguilla", ja: "アンギラ", it: "Anguilla", …}
flag: "https://restcountri

I need to access the languages array. Now if i try to map languages inside the country component, i can display the informations. But i want to show the langauges only on the modal component, and if i map the clickedCountry state responsible for the modal i will receive the error that "languages" is undefined. How it comes if is the same object filtered through the find function? Hope i was clear guys, cheers.

Answer 1

I know you understood whats happened!, just add this to Modal component

<ul>
{
languages && languages.map(lan=> {return <li>{lan.name}</li>} )
 }
</ul>