В 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