How to map an array of objects in React

I have an array of objects. I would like to map this array of objects. I know how to map an array, but can't figure out how to map an array of objects. Here is what I have done so far :

The array of objects I want to map :

const theData = [ { name: 'Sam', email: '' }, { name: 'Ash', email: '' } ] 

My component :

class ContactData extends Component { render() { //works for array const renData = this.props.dataA.map((data, idx) => { return <p key={idx}>{data}</p> }); //doesn't work for array of objects const renObjData = this.props.data.map(function(data, idx) { return <p key={idx}>{data}</p> }); return ( <div> //works {rennData} <p>object</p> //doesn't work {renObjData} </div> ) } } ContactData.PropTypes = { data: PropTypes.arrayOf( PropTypes.obj ), dataA: PropTypes.array } ContactData.defaultProps = { data: theData, dataA: dataArray } 

What am I missing ?

6 Answers

What you need is to map your array of objects and remember that every item will be an object, so that you will use for instance dot notation to take the values of the object.

In your component

 [ { name: 'Sam', email: '' }, { name: 'Ash', email: '' } ].map((anObjectMapped, index) => { return ( <p key={`${anObjectMapped.name}_{anObjectMapped.email}`}> {anObjectMapped.name} - {anObjectMapped.email} </p> ); }) 

And remember when you put an array of jsx it has a different meaning and you can not just put object in your render method as you can put an array.

Take a look at my answer at mapping an array to jsx

@FurkanO has provided the right approach. Though to go for a more cleaner approach (es6 way) you can do something like this

[{ name: 'Sam', email: '' }, { name: 'Ash', email: '' } ].map( ( {name, email} ) => { return <p key={email}>{name} - {email}</p> }) 

Cheers!

I think you want to print the name of the person or both the name and email :

const renObjData = this.props.data.map(function(data, idx) { return <p key={idx}>{data.name}</p>; }); 

or :

const renObjData = this.props.data.map(function(data, idx) { return ([ <p key={idx}>{data.name}</p>, <p key={idx}>{data.email}</p>, ]); }); 

you must put object in your JSX, It`s easy way to do this just see my simple code here:

 const link = [ { name: "Cold Drink", link: "/coldDrink" }, { name: "Hot Drink", link: "/HotDrink" }, { name: "chease Cake", link: "/CheaseCake" } ]; 

and you must map this array in your code with simple object see this code :

const links = (this.props.link); {links.map((item, i) => ( <li key={i}> <Link to={item.link}>{item.name}</Link> </li> ))} 

Demo of the map function through Data finger out

const numbers = [1, 2, 3, 4, 5]; const doubled = numbers.map((number) => number * 2); console.log(doubled); 

try the following snippet

const renObjData = this.props.data.map(function(data, idx) { return <ul key={idx}>{$.map(data,(val,ind) => { return (<li>{val}</li>); } }</ul>; });