¿Cuál es el patrón típico para representar una lista de componentes de una array de datos en ReactJS?

El patrón para representar una lista de componentes a partir de una array de datos se puede realizar asignando todos los datos personalizados individuales al componente. Con la función map, asignaremos todos los datos de los elementos de la array a los componentes personalizados en una sola línea de código. 

Creemos una aplicación de reacción y veamos el patrón para representar una lista de componentes a partir de una array de datos.

Creación de la aplicación React

Paso 1: Cree una aplicación React usando el siguiente comando:

npx create-react-app example

Paso 2: después de crear la carpeta de su proyecto, es decir, ejemplo, muévase a ella con el siguiente comando:

cd example

Paso 3: cree componentes de carpeta dentro de la carpeta src del directorio del proyecto de reacción y dentro de la carpeta de componentes cree archivos List.jsx.

Estructura del proyecto : Se verá así.

Ejemplo 1 : ejemplo básico de representación de una lista. Escriba el siguiente código en el archivo index.js, App.js y List.jsx.

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
  
ReactDOM.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>,
  document.getElementById('root')
);
  
// If you want to start measuring 
// performance in your app, pass a 
// function to log results 
reportWebVitals();

import React from "react";
import List from "./components/List";
  
function App() {
  const Users = [
    // Array of  students data
    {
      name: "Deepak",
      rollNo: "123",
    },
    {
      name: "Yash",
      rollNo: "124",
    },
    {
      name: "Raj",
      rollNo: "125",
    },
    {
      name: "Rohan",
      rollNo: "126",
    },
    {
      name: "Puneet",
      rollNo: "127",
    },
    {
      name: "Vivek",
      rollNo: "128",
    },
    {
      name: "Aman",
      rollNo: "129",
    },
  ];
  return (
    <div className="App">
        <h1>
            Rendering List of components
            with array of data
        </h1>
        {Users.map((user, index) => {
        return <List key={index} 
            name={user.name} rollNo={user.rollNo} />;
        })}
    </div>
  );
}
  
export default App;

import React from "react";
  
function List(props) {
    return (
        <div
            style={{
                display: "flex",
                flexDirection: "column",
                alignItems: "center",
                height: "100%",
                backgroundColor: "#fafafa",
                margin: "20px",
            }}
        >
            <div>Name of student {props.name}</div>
            <div>Roll number of student {props.roll}</div>
        </div>
    );
}
  
export default List;

Paso para ejecutar la aplicación: Ejecute la aplicación usando el siguiente comando:

npm start

Salida: Tomamos una array de datos de los estudiantes en nuestro archivo App.js, luego creamos un componente List.jsx en el que se pasan los datos de la array y, con la ayuda de la función de mapeo, mapeamos el componente List con una array de datos. Luego, con la ayuda de accesorios, estamos usando esos datos dentro de nuestro componente.

Lista de componentes

Este patrón de representar una lista del componente utilizando una array de datos evita la repetición y enumera nuestros componentes con los datos del elemento individual.