How to Display an Array of Objects in React?-JS Tutorial-php.cn

How to Display an Array of Objects in React?

Barbara Streisand

Release： 2024-11-07 21:13:02

Original

1024 people have browsed it

How to Display an Array of Objects in React?

How to Display an Array of Objects in React

In React, displaying an array of objects requires a mapping process to transform the array into visible elements.

Mapping Arrays to Rendered Items

To render an array of objects, you can utilize the .map() function. This function takes a callback function that accepts individual array elements as input.

Option 1: Storing Mapped Items in 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>

Copy after login

Here, the listItems variable stores the mapped elements, which are then rendered within a

Option 2: Direct Mapping in the Return

Alternatively, you can eliminate the need for an intermediary variable:

<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>

Copy after login

In this variation, the mapping function is directly called within the return statement.

Keys for Unique Identifiers

When rendering arrays, it's essential to provide unique keys for each item. In both options, a key is added to each rendered element to optimize rendering performances and allow for efficient updates.

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