How to Render an Array of Objects in React?

Rendering an Array of Objects in React

The query demonstrates an attempt to render a list of objects in React. However, it is missing the necessary return statement within the render() method. Let's address this and provide a comprehensive solution:

Solution:

To render an array of objects in React, there are two approaches:

Method 1: Store the output to a variable

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

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

Method 2: Directly write the map function in the return

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

In both methods, the data is mapped to a list of elements. Each element is assigned a unique key prop, as required by React. This key ensures efficient re-rendering and maintains the identity of each list item.

These solutions provide a reliable and flexible way to render arrays of objects in React.

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