The core way to render a list in React is to use map() to iterate over the array and return JSX elements, while having to add a unique key to each element. 1. Use map() to convert the array to a JSX list; 2. Each list item must have a unique key attribute, and the unique ID in the data is preferred rather than an index; 3. Handle the empty list state to improve the user experience; 4. Nested lists can be implemented through nested maps, and the keys of the outer and inner loops need to be set. These practices ensure that components are efficient and maintainable.

Rendering a list in React is not difficult, but to write it clearly and efficiently, there are still some details that need to be paid attention to. The core is: use map() to traverse the array, return the JSX element, and remember to add key attribute .

Rendering lists with map is the most common way

The most common practice in React is to use map() method of the array to convert the data into a set of JSX elements. For example, if you want to render a name list:

 const names = ['Alice', 'Bob', 'Charlie'];

function NameList() {
  Return (
    <ul>
      {names.map(name => (
        <li>{name}</li>
      ))}
    </ul>
  );
}

This will show three <li> . Be aware, however, that each element must have a unique key , otherwise React will warn you.

Each list item must have a unique key attribute

This is something that many people tend to ignore at the beginning. If you run the above code, the console may report an error: "Each child in a list should have a unique 'key' prop."
This is because React uses key to identify which items have changed, been added, or been removed. So you should add a key to each list item:

 {names.map((name, index) => (
  <li key={index}>{name}</li>
))}

If the data itself has a unique ID (such as a list of users obtained from the backend), then it is preferred to use that ID as the key instead of indexing. For example:

 {users.map(user => (
  <li key={user.id}>{user.name}</li>
))}

The advantage of using ID is that React can correctly update the DOM even if the array order changes.

Consider displaying when the list is empty

Sometimes your list may be empty, such as not loading or searching without results. At this time, you can add a judgment to display a prompt like "No data yet":

 function NameList({ names }) {
  if (!names.length) {
    return <p>No name was found</p>;
  }

  Return (
    <ul>
      {names.map((name, index) => (
        <li key={index}>{name}</li>
      ))}
    </ul>
  );
}

This way of handling can make the user experience more friendly and avoid blank pages.

Nested lists can also be easily implemented

Sometimes you will encounter nested data structures, such as child items under classification. You can handle this with nested map :

 const categories = [
  { id: 1, name: 'fruit', items: ['apple', 'banana'] },
  { id: 2, name: 'vegetable', items: ['tomato', 'cucumber'] }
];

function CategoryList() {
  Return (
    <div>
      {categories.map(category => (
        <div key={category.id}>
          <h3>{category.name}</h3>
          <ul>
            {category.items.map((item, idx) => (
              <li key={idx}>{item}</li>
            ))}
          </ul>
        </div>
      ))}
    </div>
  );
}

Here, the outer loop is a classification, and the inner loop is a specific item in each category. Note that neither key should be omitted, and it is best to use a unique ID as much as possible.

Basically that's it. Although it seems simple, in actual projects, handling the key, empty state and nested structure of the list can make your components more robust and maintainable.

The above is the detailed content of How to render lists in React. For more information, please follow other related articles on the PHP Chinese website!