How to map data into Components using ReactJS?

Map all individual custom pieces of data to the custom component. 

For example: Instead of writing custom components again and again with different props. I will make an array that contains all props and use the map() function to map the array element with a custom component in a single component call.

A map is a data collection type where data is stored in the form of key-value pairs. The value stored in the map must be mapped to the key. The map is a JavaScript function that can be called on any array. With the map function, we map every element of the array to the custom components in a single line of code. That means there is no need to call components and their props as array elements again and again.

Syntax:

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: Contain an array with the user’s name and roll number in the form of key-value pairs.

Javascript

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: Username and roll number as props in the Info component.

Javascript

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;

Example: Mapping data from list.js file to custom Info component using the map function.

App.js: Import Users array and Info component in the App.js file. Use the map function to map each element of User arrays to the Info component. 

Javascript

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;

Output :

Example 2: Mapping data from list.js file to Info component without using the map function.

App.js file:

Javascript

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;

Output: 

From both the above example, we get the same output but one can observe by using the map function in the App.js file, mapping array data to component becomes more easy and less code is needed.