JIYIK CN >

Looping over an array of objects in React:

1. Use map()the method to iterate over an array.
2. The function we pass to map()is called for each element in the array.
3. This method returns a new array containing the results of the function passed in.

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  return (
    <div>
      {employees.map(employee => {
        return (
          <div key={employee.id}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

The function we pass to Array.mapthe method is called for each element in the array.

In each iteration, we set the key attribute of the outermost element to a unique value and render the object's value.

Destructuring Object Properties

We can also destructure the properties of an object to make our code easier to read.

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  return (
    <div>
      {employees.map(({id, name, country}) => {
        return (
          <div key={id}>
            <h2>name: {name}</h2>
            <h2>country: {country}</h2>

            <hr />
          </div>
        );
      })}
    </div>
  );
}

We destructure the arguments of the object parameter so we don't have to access every property on the object.

Alternatively, we can use Array.forEachthe method.

Using forEach() to iterate over an array of objects

This is a three-step process:

1. Use forEach()the method to iterate over an array.
2. Declare an empty array to store JSX elements.
3. On each iteration, push the object's JSX into the array.

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  const results = [];

  employees.forEach(employee => {
    results.push(
      <div key={employee.id}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  });

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

This example achieves the same result.

The function we pass to forEach()the method is called for each element (object) in the array.

Instead of rendering the object's values ​​directly, we push the JSX markup for each object into the results array.

The final step is to render the resulting array.

Using for...of to iterate over an array of objects

We can also use for...ofloop to iterate over an array of objects.

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', country: 'Austria'},
    {id: 2, name: 'Jiyik', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
    {id: 4, name: 'Dean', country: 'Denmark'},
    {id: 5, name: 'Ethan', country: 'Egypt'},
  ];

  const results = [];

  for (const employee of employees) {
    results.push(
      <div key={employee.id}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

        <hr />
      </div>,
    );
  }

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

for...ofLoops can also be used to iterate over arrays of objects.

When we have to breakexit the loop prematurely using keyword, we can use for...ofinstead of forEach()method.

breakThe keyword cannot forEach()be used in methods but for...ofis supported in loops.