¿Cómo usar map() para crear listas en ReactJS?

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.

Estructura del proyecto

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.

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.