Objects are not valid as react child -react

Question

I have a object inside a variable called clickedCountry that has the structure {name:x, population: x, region:x, capital: x...} . I can access it via clickedCountry.population . However, if I want to access it programmatically (where I wrote, works not) I get

Objects are not valid as React children

 { ['Name', 'Population', 'Region','Capital', 'Currencies', 'Languages'].map(el => { let name = el.toLowerCase() console.log(typeof(name)) //=>returns string console.log(name) //=> returns population, region etc. return ( <Typography gutterBottom component="div"> <span className='font-600'>{el}:</span> {clickedCountry.name} //=> works {clickedCountry[name]} //=> works not {clickedCountry[`${name}`]} //=>works not {clickedCountry[`${el.toLowerCase()}`]} //=>works not </Typography> ) }); }

Answer 1

You are returning valid JSX for every element in your array. You also need to return the mapped array.

You might want to do this

{
return ['Name', 'Population', 'Region','Capital', 'Currencies', 'Languages'].map(el => {

    let name = el.toLowerCase()
    console.log(typeof(name)) //=>returns string
    console.log(name) //=> returns population, region etc.

    return (
      <Typography gutterBottom component="div">
        <span className='font-600'>{el}:</span> 
         {clickedCountry.name} //=> works
         {clickedCountry[name]}  //=> works not 
         {clickedCountry[`${name}`]} //=>works not
         {clickedCountry[`${el.toLowerCase()}`]} //=>works not 
      </Typography>
    )

  });

}

Answer 2

It sounds like you have an array of objects that don't necessarily have the same keys, but you want to iterate over them anyway using the keys they do have to create some JSX.

Here we're passing in the data array as a component prop. We map over the array and for each object we get its keys ( Object.keys() returns an array of its own). We then map over the keys array and for each object property with that key we return some JSX.

 const { useState } = React; function Example({ data }) { return ( <div> {data.map(obj => { const keys = Object.keys(obj); return ( <div className="country"> {keys.map(key => { return ( <div> <span className="label">{key}: </span> {obj[key]} </div> ); })} </div> ); })} </div> ); } const data = [ { name: 'US', population: '320M', region: 'Georgia', continent: 'North America' }, { name: 'Spain', population: '47M', capital: 'Madrid', anthem: 'Marcha Real', continent: 'Europe' } ]; ReactDOM.render( <Example data={data} />, document.getElementById('react') );

 .country { background-color: #efefef; padding: 0.2em; border: 1px solid #787878; } .country:not(:last-child) { margin-bottom: 1em; } .label { text-transform: capitalize; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>