ReactJs rendering a nested value in an array of objects

Question

I am trying to iterate/map through an array of objects and use nested values, but I cannot seem to get it to work. If i pass in a simple array

const people = [
 { name: "joe", id: "1" },
 { name: "mary", id: "2" }
];

to my ShowList component

const ShowList = (props) => {
 const {people} = props;
 return ( renderPeep(people))
};

const renderPeep = (people) => (
 <ul>
  {people.map((peep, index) => (
    <li key={index}>{peep}</li>
   ))}
</ul>
 )

I get a list of both values:

joe1
mary1

and both dot notation and bracket dont work ({peep.name} ) to just list names. is the map function causing us to lose keys info on the underlying objects? what am I missing?

yep. I just realized I succumbed to the combinatorial problem of Javascript- every library addition completely changes everything, i.e. deciding between 5 libraries means theres 32 different implementations I need to learn. In my case, I wasn't actually passing in the people object, i was passing it to Immutable js fromJS function. So, it was peep.get('name') that I needed. — Azeli
– Azeli, Commented Dec 24, 2017 at 7:06

Hassan Imam · Accepted Answer · 2017-12-24 06:35:19Z

1

Change <li key={index}>{peep}</li> to <li key={index}>{peep.name}</li>. Inside the array#map you are getting an object and you can access name using dot notation or bracket notation.

Alternatively, you can also use destructuring:

const renderPeep = (people) => (
 <ul>
  {people.map(({name}, index) => (
    <li key={index}>{name}</li>
   ))}
</ul>
)

const people = [
 { name: "joe", id: "1" },
 { name: "mary", id: "2" }
];

const ShowList = (props) => {
 const {people} = props;
 return (renderPeep(people));
};

const renderPeep = (people) => (
 <ul>
  {people.map((peep, index) => (
    <li key={index}>{peep.name}</li>
   ))}
</ul>
)

ReactDOM.render(
  <ShowList people={people} />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id='app'></div>

answered Dec 24, 2017 at 6:35

Hassan Imam

22.6k6 gold badges45 silver badges53 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Sagiv b.g Over a year ago

Actually this is the exact problem the OP mentioned, that peep.name is not working as expected: "and both dot notation and bracket dont work ({peep.name} )..."

Collectives™ on Stack Overflow

ReactJs rendering a nested value in an array of objects

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related