How to Render Arrays of Objects in React?

Rendering Arrays of Objects in React

In React, displaying a list of data from an array of objects requires a slightly different approach than traditional HTML.

Approach 1: Create an Array of React Elements

One way to render an array of objects in React is to first create an array of React elements, each representing a single item in the array. Here's an example:

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  const listItems = data.map((d) => <li key={d.name}>{d.name}</li>);

  return (
    <div>
      {listItems}
    </div>
  );
}

This approach creates a new React element for each item in the array, ensuring that each item has a unique key for identification.

Approach 2: Inline Map Function in Return

An alternative method is to include the mapping function directly in the JSX return statement:

render() {
  const data = [{ name: "test1" }, { name: "test2" }];
  return (
    <div>
      {data.map((d, idx) => <li key={idx}>{d.name}</li>)}
    </div>
  );
}

This approach eliminates the need to create a separate array of React elements, making the code more concise.

Key Property

It's important to assign a unique key property to each React element when rendering a list of objects. This allows React to efficiently identify and update specific elements in the DOM when the data changes.

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