В React функция map () чаще всего используется для рендеринга списка данных в DOM.

Что такое функция map ()?

Функция .map () позволяет вам манипулировать элементами в массиве путем итерации и доступа к отдельным элементам, поэтому для ее использования вам необходимо прикрепить функцию .map () к массиву, который вы хотите перебирать.

Синтаксис:

let newArray = arr.map(function callback(currentValue [, index[, array]] {
    // return element for newArray
} [, thisArg]

Как видите, функция map () ожидает обратного вызова в качестве аргумента и выполняет его один раз для каждого элемента в массиве. Из параметров обратного вызова вы можете получить доступ к текущему элементу, текущему индексу и самому массиву.

Функция map () также принимает необязательный второй аргумент, который вы передаете для использования в качестве this внутри обратного вызова → каждый раз, когда выполняется обратный вызов, возвращаемое значение затем добавляется в новый массив.

Давайте посмотрим на пример:

const list = [1,2,3,4]
const secList = list.map( (i) -> i*2 )

Если мы затем вызовем console.log (secList), мы получим массив [2,4,6,8].

Использование map () в React

Лучше всего пояснить это на примере.

У нас есть массив объектов, которые содержат названия фруктов и количество:

const fruit = [
    { name: "Apple", quantity: 4 },
    { name: "Peach", quantity: 2 },
];

Чтобы отобразить его в DOM, нам нужно будет использовать функцию map () и вернуть JSX из функции обратного вызова.

const Fruits = () => {
  const fruit = [
    { name: "Apple", quantity: 4 },
    { name: "Peach", quantity: 2 },
  ];
return (
    <div className="fruits">
      {fruit.map( (item) => {
        <div className="fruits__name"> {item.name} </div>
        <div className="fruits__quantity"> {item.quantity} </div>
      ))}
    </div>
  );
};

Если вы попробуете это сами, то увидите, что все фрукты будут отображаться следующим образом:

Ąpple
4
Peach
2