Un mapa es un tipo de recopilación de datos donde los datos se almacenan en forma de pares. Contiene una clave única. El valor almacenado en el mapa debe asignarse a la clave. No podemos almacenar un par duplicado en el mapa(). Se debe a la unicidad de cada clave almacenada. Se utiliza principalmente para búsquedas rápidas y búsqueda de datos.
En React, el ?mapa? Método utilizado para recorrer y mostrar una lista de objetos similares de un componente. Un mapa no es una característica de React. En cambio, es la función estándar de JavaScript la que podría invocarse en cualquier matriz. El método map() crea una nueva matriz llamando a una función proporcionada en cada elemento de la matriz que llama.
Ejemplo
En el ejemplo dado, la función map() toma una matriz de números y duplica sus valores. Asignamos la nueva matriz devuelta por map() a la variable doubleValue y la registramos.
var numbers = [1, 2, 3, 4, 5]; const doubleValue = numbers.map((number)=>{ return (number * 2); }); console.log(doubleValue); En React, el método map() se utiliza para:
1. Atravesando el elemento de la lista.
Ejemplo
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; Producción
2. Atravesar el elemento de la lista con claves.
Ejemplo
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; Producción
