Pass Multiple Value Inside Component In React Using Props And Map

In this article, we are going to discuss how to call child component with looping props values,  or pass multiple values one by one inside child components in React. Here we are using Map function to loop values inside objects.

 

Let's create a new React application using npx create-react-app myreactapp. Create a folder inside src and name it propsusage. Then create a file with the name propsusage.js inside propsusage folder. Then create another file with the name loopprops.js inside propsusage folder.

 

Now open propusage.js file .

 

We will create json object.

let order = [{
    customerName: 'murali',
    progress: 0
}, {
    customerName: 'krishnan',
    progress: 1
}, {
    customerName: 'harsan',
    progress: 2
}, {
    customerName: 'heman',
    progress: 3
}, ];

Now I am going to pass this object value one by one to the child component loopprops one by one.

 

For all props key must differentiate the value . 

<div>
   {order.map(value => (<LoopProps key={value.progress} customerName={value.customerName} progress={value.progress} ></LoopProps>))
}
</div >

Now In child component's loopprops.js I am going to use all the values with a progressive bar.

<p>Pizza for: {props.customerName}</p>
<div className="progress">
   <div className={`progress-bar ${props.progress === 0 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Ordered</div>
   <div className={`progress-bar ${props.progress === 1 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Prepping</div>
   <div className={`progress-bar ${props.progress === 2 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Cooking</div>
   <div className={`progress-bar ${props.progress === 3 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Quality</div>
   <div className={`progress-bar ${props.progress === 4 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Delivery</div>
</div>

Code for propusage.js

import React from 'react'
import LoopProps from './loopprops'
function propusage() {
   let order = [
      { customerName: 'murali', progress: 0 },
      { customerName: 'krishnan', progress: 1 },
      { customerName: 'harsan', progress: 2 },
      { customerName: 'heman', progress: 3 },
   ];
return (
   <div>
      {order.map(value => (<LoopProps key={value.progress}
      customerName={value.customerName} progress={value.progress}
      ></LoopProps>))
      }
   </div >
);
}

export default propusage;

Code for loopprops.js

import React from 'react';
function loopprops(props) {

return (<div>
<div>
   <p>Pizza for: {props.customerName}</p>
   <div className="progress">
      <div className={`progress-bar ${props.progress === 0 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Ordered</div>
      <div className={`progress-bar ${props.progress === 1 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Prepping</div>
      <div className={`progress-bar ${props.progress === 2 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Cooking</div>
      <div className={`progress-bar ${props.progress === 3 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Quality</div>
      <div className={`progress-bar ${props.progress === 4 ? 'bg-danger' : 'bg-info'}`} role="progressbar" style={{ width: '20%' }}>Delivery</div>
   </div>
</div>
</div>)
}
export default loopprops;

In App.Js, we have to call the PropUsage component to execute our code.

import React from 'react';
import './App.css';
import PropUsage from './propsusage/propsusage'
function App() {
   return (
      <div className="App">
         <PropUsage></PropUsage>
      </div>
   );
}

export default App;

To run the application type

 

npm start 

 

then the application will be open in http://localhost:3000 post. 

 

Now the output will be like this,

 

 

I have attached my code as well. 

 

I am going to give another example that will pass the objects directly in the child component and in that child component we are forming the table with map function.

 

Create object as given below

let productLists = [{
    id: 'p01',
    name: 'name 1',
    price: 5,
    quantity: 6,
    status: true,
    photo: 'thumb1.gif'
}, {
    id: 'p02',
    name: 'name 2',
    price: 2,
    quantity: 3,
    status: false,
    photo: 'thumb2.gif'
}, {
    id: 'p03',
    name: 'name 3',
    price: 15,
    quantity: 16,
    status: true,
    photo: 'thumb3.gif'
}];

Now i am going to create a new child component called product list. in this product list i will pass this above object and form the table.

function ProductList({ productLists }) {
return (<table className="table">
   <tbody>
      {productLists.map((product, index) => {
         return <EachProduct key={index} SingleProduct={product} />
      })}
   </tbody>
</table>)

In that above code I am calling one more child component called eachproduct that will form the rows.

function EachProduct(SingleProduct) {
console.log(SingleProduct);
return (<tr>
   <td>{SingleProduct.SingleProduct.id}</td>
   <td>{SingleProduct.SingleProduct.name}</td>
   <td>{SingleProduct.SingleProduct.status ? 'show' : 'hide'}</td>
   <td>{SingleProduct.SingleProduct.price}</td>
</tr>)
}

To call this product list component i will give the syntax below .

<ProductList productLists={productLists}></ProductList>

Here I am assigning the productlists object to productLists props(red color). and those props have been used in child component

.

Output will be given below: