Sometimes, we want to render an array.map() in React.
In this article, we’ll look at how to render an array.map() in React.
How to render an array.map() in React?
To render an array.map() in React, we call map with a function that returns the elements we want.
For instance, we write
data.map((item, key) => {
return (
<tr key={key}>
<td>{item.heading}</td>
<td>{item.date}</td>
<td>{item.status}</td>
</tr>
);
});
to call data.map with a function that returns tr elements.
We set the key prop to a unique value so that React can identify the component being rendered.
item is the entry in data being looped through.
Conclusion
To render an array.map() in React, we call map with a function that returns the elements we want.
