Um mapa é um tipo de coleta de dados onde os dados são armazenados na forma de pares. Ele contém uma chave exclusiva. O valor armazenado no mapa deve ser mapeado para a chave. Não podemos armazenar um par duplicado no map(). É por causa da exclusividade de cada chave armazenada. É usado principalmente para pesquisa rápida e pesquisa de dados.
No React, o ?mapa? método usado para percorrer e exibir uma lista de objetos semelhantes de um componente. Um mapa não é um recurso do React. Em vez disso, é a função JavaScript padrão que pode ser chamada em qualquer array. O método map() cria um novo array chamando uma função fornecida em cada elemento do array de chamada.
Exemplo
No exemplo dado, a função map() pega uma matriz de números e duplica seus valores. Atribuímos o novo array retornado por map() à variável doubleValue e o registramos.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); No React, o método map() usado para:
1. Percorrendo o elemento da lista.
Exemplo
import React from 'react'; import ReactDOM from 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li> ); return ( <h2>React Map Example</h2> <ul>{listItems}</ul> ); } const myLists = ['A', 'B', 'C', 'D', 'D']; ReactDOM.render( , document.getElementById('app') ); export default App; Saída
2. Percorrendo o elemento da lista com chaves.
Exemplo
import React from 'react'; import ReactDOM from 'react-dom'; function ListItem(props) { return <li>{props.value}</li>; } function NumberList(props) { const numbers = props.numbers; const listItems = numbers.map((number) => ); return ( <h2>React Map Example</h2> <ul> {listItems} </ul> ); } const numbers = [1, 2, 3, 4, 5]; ReactDOM.render( , document.getElementById('app') ); export default App; Saída
