JIYIK CN >

forEach()The method can be used to iterate over an array outside of the JSX code in React. If we need to iterate over an array and render its elements directly in the JSX code, use map()the method instead.

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];

  const results = [];

  // 👇️ 可以在 JSX 代码之外使用 forEach
   // 如果需要为每个数组元素调用一次函数
  employees.forEach((employee, index) => {
    results.push(
      <div key={index}>
        <h2>name: {employee.name}</h2>
        <h2>country: {employee.country}</h2>

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

  // 👇️ 或直接在 JSX 代码中使用 map()
  return (
    <div>
      {employees.map((employee, index) => {
        return (
          <div key={index}>
            <h2>name: {employee.name}</h2>
            <h2>country: {employee.country}</h2>

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

      <hr />
      <hr />
      <hr />

      {results}
    </div>
  );
}

When we need to call a function for each element in an array, we can use Array.forEachthe method.

However, forEach()it cannot be used to iterate over arrays directly in JSX code.

forEach()Method calls the supplied function with each element in the array but returns undefined.

It doesn't make sense to use it directly in our JSX code, because we need to return the JSX element instead of undefined.

We can use the forEach() method:

1. Iterate over an array.
2. Pushes a JSX element into a new array.
3. Renders a JSX element.

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];

  const results = [];

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

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

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

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

We can JSXrender the resulting array directly in the code, since it is JSXan array of elements

To iterate over an array and render its elements directly in JSX code, use Array.mapthe method.

export default function App() {
  const employees = ['Jiyik', 'Fql', 'Carl'];

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

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

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

In each iteration, we keyset the prop of the outermost element to a unique value and render that element.

You can also forEach()use for...ofthe loop just like the method.

export default function App() {
  const employees = [
    {id: 1, name: 'Jiyik', country: 'China'},
    {id: 2, name: 'Fql', country: 'China'},
    {id: 3, name: 'Carl', country: 'Canada'},
  ];

  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 exit the loop prematurely using the breakfor...of keyword, we will use instead of forEach()the method.

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