How to get data from multiple child component in ReactJS

Question

I was having a parent component named Cart.jsx in react and the child component named Card.jsx.

The Parent component looks like this.

Cart.jsx

import React, { useState, useEffect, useContext } from "react";
import Card from "../../Components/Card";

function Cart() {
   const cart = [**Array of Objects**]
   const [total,setTotal] = useState([]);

      return (
        <div className="cart__Items">
           <Card item={cart[0]} />;
           <Card item={cart[1]} />;
           <Card item={cart[2]} />;
        </div>
      )
}

export default Cart;

And the Card Component looks as follows

Card.jsx

import React, { useState } from "react";

function Card() {
   const [price,setPrice] = useState(0);
    
   // in-between implemented some function to calculate price value.

      return (
        <div>
         // rendering code 
        </div>
      )
}

export default Card;

Now the problem is, how do I get the price data of each child component and store them in the total array of the parent component.

Here the parent has 3 Cardcomponents, I need to get the price data from each component and store them in the Cart component

If cart object has price. Inside Card you can simply fetch via item.price — Shubham Verma
– Shubham Verma, Commented Jan 25, 2022 at 10:11
I need to pass data from child to parent, in my case I need 3 price values from 3 child components to be stored in parent. @ShubhamVerma — Boom
– Boom, Commented Jan 25, 2022 at 10:15
can you add an example of your data [**Array of Objects**] — Aamin Khan
– Aamin Khan, Commented Jan 25, 2022 at 10:17

hassanqshi · Accepted Answer · 2022-01-25 10:20:12Z

1

Here is the code. I hope this might help

 import React, { useState, useEffect, useContext } from "react";
 import Card from "../../Components/Card";

 function Cart() {
  const cart = [**Array of Objects**]
  const [total,setTotal] = useState(0);

  return (
    <div className="cart__Items">
       {cart.map(crt =><Card item={crt} total={total} setTotal={setTotal} />}
    </div>
  )
}

export default Cart;


import React, { useState } from "react";

function Card(props) {
   const [price,setPrice] = useState(0);
   const {setTotal, total} = props
   useEffect(()=>{
      setTotal(total+price)
   },[])
   // in-between implemented some function to calculate price value.

  return (
    <div>
     // rendering code 
    </div>
  )
}

export default Card;

answered Jan 25, 2022 at 10:20

hassanqshi

3632 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

octaviandd · Accepted Answer · 2022-01-25 10:12:20Z

0

import React, { useState, useEffect, useContext } from "react";
import Card from "../../Components/Card";

function Cart() {
   const cart = [**Array of Objects**]
   const [total,setTotal] = useState([]);

      return (
        <div className="cart__Items">
           {cart.map((item) => (<Card item={item} setTotal={setTotal} />))}
        </div>
      )
}
export default Cart;```

Now you have access to the setTotal function inside each card Item from which you can update the parent state of "total".

answered Jan 25, 2022 at 10:12

octaviandd

1792 silver badges19 bronze badges

Comments

user13818967 · Accepted Answer · 2022-01-25 10:18:58Z

If you feel like the individual prices are to be calculated by the child you should use an event handler prop :

Cart.jsx

import React, { useState, useEffect, useContext } from "react";
import Card from "../../Components/Card";

function Cart() {
   const cart = [**Array of Objects**]
   const [total,setTotal] = useState(0);

   const handlePriceCalculated = price => {
      setTotal(total + price);
   }

   return (
      <div className="cart__Items">
         <Card item={cart[0]} onPriceCalculated={handlePriceCalculated} />
         <Card item={cart[1]} onPriceCalculated={handlePriceCalculated} />
         <Card item={cart[2]} onPriceCalculated={handlePriceCalculated} />
      </div>
   )
}

export default Cart;

Card.jsx

import React, { useState } from "react";

function Card({
   onPriceCalculated
}) {
   const [price,setPrice] = useState(0);
    
   // in-between implemented some function to calculate price value.
      ...
      setPrice(calculatedValue)
      onPriceCalculated(calculatedValue)
      ...

   return (
      <div>
         // rendering code 
      </div>
   )
}

export default Card;

Giving the responsability to the child to set the total is a bad practise and will result in your components not to be reusable as they would be too hardly coupled.

Collectives™ on Stack Overflow

How to get data from multiple child component in ReactJS

3 Answers 3

Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related