Cómo utilizar el método de mapa en reaccionar

En reaccionar, el método map se utiliza para recorrer y mostrar una lista de objetos similares del componente; el método map no es único para reaccionar y puede llamar a funciones estándar de JavaScript en cualquier matriz. El método map llama a la función proporcionada en cada elemento de. la matriz de llamada para crear una matriz.

El entorno operativo de este tutorial: sistema Windows 10, versión de reacción 17.0.1, computadora Dell G3.

Cómo utilizar el método de mapa en reaccionar

El mapa es un tipo de recopilación de datos en el que los datos se almacenan en forma de pares. Contiene una clave única a la que se deben asignar los valores almacenados en el mapa. No podemos almacenar pares duplicados en map(), esto se debe a que cada clave almacenada es única y se utiliza principalmente para buscar y encontrar datos rápidamente.

En React, el método map se usa para iterar y mostrar una lista de objetos similares en un componente. El mapa no es específico de React, sino que es una función estándar de JavaScript que se puede llamar en cualquier matriz. El método map() crea una nueva matriz llamando a la función proporcionada en cada elemento de la matriz de llamada.

ejemplo

En el ejemplo dado, la función map() acepta una matriz de números y duplica su valor, asignamos la nueva matriz devuelta por map() a la variable doubleValue y la registramos.

var números = [1, 2, 3, 4, 5]; const doubleValue = números.map((número)=>{ return (número * 2); });

En React, el método map() se utiliza para:

1. Recorra los elementos de la lista.

ejemplo

importar React desde 'react'; importar ReactDOM desde 'react-dom'; function NameList(props) { const myLists = props.myLists; const listItems = myLists.map((myList) => <li>{myList}</li > ); return ( <div> <h2>Ejemplo de mapa de reacción</h2> <ul>{listItems}</ul> </div> } const myLists = ['A', 'B', 'C'); , 'D', 'D']; ReactDOM.render( <NameList myLists={myLists} />, document.getElementById('app') );

2. Recorra los elementos de la lista por clave.

ejemplo

importar React desde 'react'; importar ReactDOM desde 'react-dom'; función ListItem(props) { return <li>{props.value}</li> } function NumberList(props) { números constantes = props.numbers; const listItems = números.map((número) => <ListItem clave={número.toString()} valor={número} /> retorno ( <div> <h2>Ejemplo de mapa de reacción</h2> <ul>); {listItems} </ul> </div> ); números constantes = [1, 2, 3, 4, 5]; ReactDOM.render( <NumberList números={números} />, document.getElementById('app' ) );