Una array en JavaScript viene con una gran cantidad de funciones para trabajar. Un mapa() es una de esas funciones que se utiliza para crear una lista de objetos llamando a una función en cada elemento de la array. En React, podemos usar la función map() para mapear una lista de valores a una lista de componentes.
Veamos cómo podemos crear una lista en reaccionar usando un proyecto simple. El proyecto tiene una lista de nombres de frutas y los cambiaremos a una lista de componentes representados en el navegador.
Creación de la aplicación React e instalación del módulo:
-
Paso 1: Cree una aplicación React usando el siguiente comando:
npx create-react-app listmapdemo
-
Paso 2: después de crear la carpeta de su proyecto, es decir, listmapdemo , muévase a ella con el siguiente comando:
cd listmapdemo
Estructura del proyecto: Tendrá el siguiente aspecto.
Ejemplo: al crear componentes usando el mapa, reaccionar espera que se pase una propiedad clave a cada componente que se está construyendo. Todavía se procesará si no se pasa la clave, pero verá una advertencia de React al respecto en la consola. En el archivo App.js, hemos definido una lista de frutas que luego se asigna a una lista de divs.
App.js
import React from "react" function App() { // Declared an array of items const fruits = [ 'Apple', 'Mango', 'Banana', 'GFG' ]; // Some styling for the items const styles = { backgroundColor: 'white', width: '50px', marginBottom: '10px', padding: '10px', color: 'green', boxShadow: 'rgb(0,0,0,0.44) 0px 5px 5px', }; return <> { /* This maps each array item to a div adds the style declared above and return it */ fruits.map(fruit => <div key={fruit} style={styles}>{fruit}</div>) } </>; } export default App;
Paso para ejecutar la aplicación: ejecute la aplicación utilizando el siguiente comando desde el directorio raíz del proyecto:
npm start
Salida: Ahora abra su navegador y vaya a http://localhost:3000/ , verá la siguiente salida:
Explicación: declaramos una lista de frutas que se utilizarán para representar divs. El objeto de estilos contiene estilos CSS para cada elemento, simplemente agrega algo de margen, relleno y algo de sombra. Finalmente, la función de la aplicación devuelve una lista de divs que se devuelven llamando a map() en la array de frutas. Agregamos el objeto de estilos al atributo de estilo de cada div.