JIYIK CN >

Using the method with an index in React map():

1. Calls the method on the array map().
2. The function passed to map()the method will be called with the element and index.

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bob', salary: 75},
    {id: 3, name: 'Carl', salary: 125},
  ];

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

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

The function we pass to Array.mapthe method will be called with each element in the array and the index of the current iteration.

In each iteration, we render the index as well as the name and salary attributes on the employee object.

注意, when calling a method in JSX code map(), we must use curly braces {}to wrap map()the call to .

This is only needed in our JSX code and signals to React that we are writing an expression that must be evaluated.

We used the index of the key prop in the example, but if you have a stable unique identifier, it is better to use it. We can use the id property on each object.

React uses the key prop internally for performance reasons. It helps the library ensure that only array elements that have changed are re-rendered.

That being said, unless we are dealing with thousands of array elements we won't see any noticeable difference.

We have used arrow functions with explicit return statements in our examples. If we only need to render some JSX elements and do not use conditions, declare variables, etc., we can use implicit returns, which will make the code more readable.

export default function App() {
  const employees = [
    {id: 1, name: 'Alice', salary: 100},
    {id: 2, name: 'Bob', salary: 75},
    {id: 3, name: 'Carl', salary: 125},
  ];

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

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

map()We used an implicit return on the arrow function passed to the method.

const arr = ['a', 'b', 'c'];

// 👇️ explicit return
const result1 = arr.map(element => {
  return element;
});

// 👇️ implicit return
const result2 = arr.map(element => element);

map()We can only use implicit returns when we don't have to use conditionals or define variables in the function passed to .