No react, o método map é usado para percorrer e exibir uma lista de objetos semelhantes do componente; o método map não é exclusivo para reagir e pode chamar funções JavaScript padrão em qualquer array. a matriz de chamada para criar uma matriz.
O ambiente operacional deste tutorial: sistema Windows 10, react versão 17.0.1, computador Dell G3.
Mapa é um tipo de coleta de dados no qual os dados são armazenados na forma de pares. Ele contém uma chave exclusiva para a qual os valores armazenados no mapa devem ser mapeados. Não podemos armazenar pares duplicados em map(), isso ocorre porque cada chave armazenada é única e é usada principalmente para pesquisa e localização rápida de dados.
No React, o método map é usado para iterar e exibir uma lista de objetos semelhantes em um componente. O mapa não é específico do React. Em vez disso, é uma função JavaScript padrão que pode ser chamada em qualquer array. O método map() cria um novo array chamando a função fornecida em cada elemento do array de chamada.
exemplo
No exemplo dado, a função map() aceita um array de números e dobra seu valor, atribuímos o novo array retornado por map() à variável doubleValue e o registramos.
var números = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); });No React, o método map() é usado para:
1. Percorra os elementos da lista.
exemplo
importar React de 'react'; importar ReactDOM de 'react-dom'; function NameList(props) { const minhasListas = props.myLists=myLists.map((myList) => <li>{myList}</li; > ); return ( <div> <h2>Exemplo do mapa React</h2> <ul>{listItems}</ul> </div> } const myLists = ['A', 'B', 'C' , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );2. Percorra os elementos da lista por chave.
exemplo
importar React de 'react'; importar ReactDOM de 'react-dom'; function ListItem(props) { return <li>{props.value}</li>; const listItems = numbers.map((number) => <ListItem key={number.toString()} value={number} /> return ( <div> <h2>Exemplo de mapa React</h2> <ul>); {listItems} </ul> </div> ); const números = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList numbers={números} />, document.getElementById('app' ));