Carova
Rendering Array Map in React
Render a list of items in the UI using an array.map() in React. You can render items from an array in React in a few different ways.
Without a Return Statement
Render the data from the specified array into the the UI. Reference data points using dot notation inside each object.
1const RenderArray = () => {
2 const items = [
3 {
4 firstname: "Marty",
5 lastname: "Bird",
6 },
7 ];
8 return (
9 <ul>
10 {items.map((item) => (
11 <li>
12 {" "}
13 {item.firstname} {item.lastname}{" "}
14 </li>
15 ))}{" "}
16 </ul>
17 );
18};With a Return Statement
If you use a return statement, you can create variables within the .map() function itself to use in your rendered output. A good use case is light data transformation and/or combining for UI purposes only.