Map array of objects and render in JSX ListItem

1

How to map an array of objects and display for each object and ListItem and the properties in JSX ? I have [{…}, {…}, {…}, {…}] and each {…} has inside an “id”: “1”, “name”: “Peter” It is easy with a normal array but this one is hard for me since I’m a beginner. Please help

2

If your array is like:

const examplePersons = [
 { id: 1, name: "Abel" },
 { id: 2,  name: "Bartholemew" },
 { id: 3, name: "Canute" },
 { id: 4, name: "Denzel" }.
];

The the components can be defined something like:

const ExampleList = ({ persons }) => (
  <ul>{ persons.map((person) =>
    <ExampleListItem id={person.id} key={person.id} name={person.name}) />
  )}</ul>
);

const ExampleListItem = ({ id, name }) =>  <li>{id}: { name }</li>;

Then called like:

<ExampleList persons={examplePersons} />
1 Like