Tenía un componente principal llamado Cart.jsx en reaccionar y el componente secundario llamado Card.jsx .
El componente principal se ve así.
Carrito.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;Y el componente de la tarjeta se ve de la siguiente manera
Tarjeta.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; Ahora el problema es, ¿cómo obtengo los datos de price de cada componente secundario y los almaceno en la matriz total del componente principal?
Aquí el padre tiene 3 componentes de la Card , necesito obtener los datos de price de cada componente y almacenarlos en el componente del Cart
Si cree que los precios individuales deben ser calculados por el niño, debe usar un accesorio de controlador de eventos:
Carrito.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;Tarjeta.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;Darle al niño la responsabilidad de establecer el total es una mala práctica y hará que sus componentes no sean reutilizables ya que estarían muy difícilmente acoplados.
Aquí está el código. Espero que esto ayude
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;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".