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 Card components, I need to get the price data from each component and store them in the Cart component

Answer 1

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".

Answer 2

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.

Answer 3

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;