React – How to List Items in JSX ? – Iterate Array Object Items in React

In this guide, you are going to learn how to display list items from an array of objects, including simple array items or nested object items. Also, we will get to know how to update the internal state of list items.

In React the JSX is used to write the HTML like templates. In the JSX we can directly use the Javascript map() method. This is method is ideally used in React to iterate over the list items.

Examples of Displaying Lists in React JSX

1# Simple Array Items

We have a simple string array named Cars and we want to list all the array string values in list. For that, will use the Javascript map() function to iterate over the array items and render them inside the JSX template:

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

export default function App() {

  const Cars = ["Aston Martin", "Lamborghini", "Ferrari", "Bugatti"];

  return (
    <div className="container mt-5">
        <h1>Render Lists in React JSX Template Examples</h1>

        <h4>Array Items</h4>
        <ul>
          {Cars.map((car) => (
            <li>{car}</li>
          ))}
        </ul>
      </div>
  );
}

The list will be rendered as shown below:

 

2# Render Items with Key

In the above example, if you open the developer console, you will notice a Warning saying “Warning: Each child in a list should have a unique “key” prop.”

To keep track while maintaining the state, each item rendered item should have the key prop with a unique identifier.

If we don’t have unique keys

In the above example, we only have the simple array, so add a unique key, we can add the index argument inside the map() function as shown below:

<ul>
   {Cars.map((car,index) => (
      <li key={index}>{car}</li>
   ))}
</ul>

 

3# Render Object Items in React JSX

Similarly, we have a Users object where each item having multiple properties. The map() function can be used without index as each user is having a unique id already available as cardid. Here we will iterate the user list items inside a table.

import React from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import "./App.css";

export default function App() {

  const Users = [
    {
      cardid: 1,
      name: "Leanne Graham",
      username: "Bret",
    },
    {
      cardid: 2,
      name: "Ervin Howell",
      username: "Antonette",
    },
    {
      cardid: 3,
      name: "Clementine Bauch",
      username: "Samantha",
    },
  ];

  return (
    <div className="container mt-5">
      <h1>Render Lists in React JSX Template Examples</h1>

      <h4>List Object Items</h4>
      <table className="table table-bordered">
        <thead>
          <tr>
            <th>Name</th>
            <th>Username</th>
          </tr>
        </thead>
        <tbody>
          {Users.map((user) => (
            <tr key={user.cardid}>
              <td>{user.name}</td>
              <td>{user.username}</td>
            </tr>
          ))}
        </tbody>
      </table>
    </div>
  );
}

It will be rendered as shown below:

 

Conclusion

We discussed how to easily iterate a simple array that can be having any type of value. Also, we discussed how to use key prop even if we don’t have it on the list. The map() function can be used to iterate any type of array or object list.

Moreover, it will also re-render if we change the state of the component. The key prop plays an important role in optimising the re-rendering of object items.