Tengo un componente con muchos botones que incrementan el contador. Necesito el contador hasta arriba en el componente principal, así que quiero pasar el valor del Counter ;
import { useState } from "react"; import Card from "./Card"; const ProductList = (props) => { const products = props.products; const [ Counter, setCounter ] = useState(0); const Count = n => { setCounter(v => v + n) } return ( <div className="ProductList" > {products.map((product) => ( <Card product={product} key={product.id} C={Count} />))} </div> ); } export default ProductList;hasta el componente principal:
import { useEffect, useState } from "react"; import ProductList from "./ProductList"; const Products = () => { const [products, setProducts] = useState (null); useEffect (() => { fetch('http://localhost:8000/products') .then(res => { return res.json(); }) .then(data => { setProducts(data); }) }, []); return ( <div className="ProductList"> {products && <ProductList products={products}/>} </div> ); } export default Products;Es una pregunta simple, pero no estoy seguro de cómo funciona. ¿Alguien puede ayudar? ¡Gracias!
Defina el estado del contador en el componente principal y luego pase tanto el contador como setCounter al elemento secundario como accesorios. Actualice el contador con setCounter y también se actualizará en el componente principal.
Niño:
import Card from "./Card"; const ProductList = ({counter, setCounter}) => { const products = props.products; const Count = n => { setCounter(v => v + n) } return ( <div className="ProductList" > {products.map((product) => ( <Card product={product} key={product.id} C={Count} />))} </div> ); } export default ProductList;Padre:
import ProductList from "./ProductList"; const Products = () => { const [products, setProducts] = useState (null); const [counter, setCounter] = useState(0); useEffect (() => { fetch('http://localhost:8000/products') .then(res => { return res.json(); }) .then(data => { setProducts(data); }) }, []); return ( <div className="ProductList"> {products && <ProductList counter={counter} setCounter={setCounter} products={products} />} </div> ); } export default Products;Si necesita la referencia del Counter en el componente Products , debe definirla en el componente mismo y pasar la referencia de la función al componente secundario.
Intenta cambiar tu código así:
Componente de Products :
const Products = () => { const [products, setProducts] = useState(null); const [Counter, setCounter] = useState(0); const count = (n) => { setCounter((v) => v + n); }; useEffect(() => { fetch('http://localhost:8000/products') .then((res) => { return res.json(); }) .then((data) => { setProducts(data); }); }, []); return ( <div className='ProductList'> {products && <ProductList products={products} count={count}/>} </div> ); }; export default Products; Componente ProductList
import Card from "./Card"; const ProductList = (props) => { const products = props.products; const count = props.count return ( <div className="ProductList" > {products.map((product) => ( <Card product={product} key={product.id} C={count} />))} </div> ); } export default ProductList; Sin embargo, si necesita pasar la función a varios niveles, probablemente debería usar la Context API , pero a partir de la pregunta, supongo que solo necesita bajar un nivel.