¿Cómo mapear datos en componentes usando ReactJS?

Asigne todos los datos personalizados individuales al componente personalizado. 

Por ejemplo: en lugar de escribir componentes personalizados una y otra vez con diferentes accesorios. Crearé una array que contenga todos los accesorios y usaré la función map() para mapear el elemento de la array con un componente personalizado en una sola llamada de componente.

Un mapa es un tipo de recopilación de datos donde los datos se almacenan en forma de pares clave-valor. El valor almacenado en el mapa debe asignarse a la clave. El mapa es una función de JavaScript que se puede llamar en cualquier array. Con la función map, asignamos cada elemento de la array a los componentes personalizados en una sola línea de código. Eso significa que no hay necesidad de llamar a los componentes y sus accesorios como elementos de array una y otra vez.

Sintaxis:

var array = [1,2,3,4,5]
var PlusOne= array.map((e)=>{
   return (e+1);
 });
 // All array element value will increase by one.   

list.js: contiene una array con el nombre del usuario y el número de registro en forma de pares clave-valor.

const Users=[
  {
    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"
  },
]
export default Users;

Info.js: nombre de usuario y número de rollo como accesorios en el componente de información.

import React from 'react';
 
function Info (props){
  return (
    <div style={{border:'1px solid black',
                 margin:'10px',width:'20%'}}>
      
 
<p> {props.name} </p>
 
 
      
 
<p> {props.rollNo}</p>
 
 
     </div>
 
  )
}
export default Info;

Ejemplo: asignación de datos del archivo list.js al componente de información personalizado mediante la función de asignación.

App.js: importe la array de usuarios y el componente de información en el archivo App.js. Utilice la función de asignación para asignar cada elemento de las arrays de usuarios al componente de información. 

import React from 'react';
import './App.css';
import Users from './list';
import Info from './Info';
 
function App() {
 
  return (
    <div style={{margin:'40px'}} >
     <h1 style={{color:'green'}}> Geeks For Geeks </h1>
      
 
<p> Mapping Data to component in React js. </p>
 
 
     {Users.map((e)=>{
       return (
       <Info name={e.name} rollNo={e.rollNo}/>
     );})}
    </div>
  );
}
export default App;

Producción :
 

Ejemplo 2: asignación de datos del archivo list.js al componente de información sin utilizar la función de asignación.

Archivo App.js: 

import React from 'react';
import './App.css';
import Users from './list';
import Info from './Info';
 
function App() {
 
  return (
    <div style={{margin:'40px'}} >
     <h1 style={{color:'green'}}> Geeks For Geeks </h1>
      
 
<p> Mapping Data to component in React js. </p>
 
 
 
       <Info name={Users[0].name} rollNo={Users[0].rollNo}/>
       <Info name={Users[1].name} rollNo={Users[1].rollNo}/>
       <Info name={Users[2].name} rollNo={Users[2].rollNo}/>
       <Info name={Users[3].name} rollNo={Users[3].rollNo}/>
       <Info name={Users[4].name} rollNo={Users[4].rollNo}/>
       <Info name={Users[5].name} rollNo={Users[5].rollNo}/>
       <Info name={Users[6].name} rollNo={Users[6].rollNo}/>
 
    </div>
  );
}
export default App;

Producción: 

De los dos ejemplos anteriores, obtenemos el mismo resultado, pero se puede observar mediante el uso de la función de mapa en el archivo App.js, la asignación de datos de la array al componente se vuelve más fácil y se necesita menos código.