I have a component with a lot of buttons, which increment the counter. I need the counter all the way up in the main component, so I want to pass the Counter value;
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;
up to the parent component:
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;
It's a simple question, but I'm not sure how it works. Can anyone help? Thanks!
Define the counter state in the parent component then pass both the counter and setCounter to the child as props. Update counter with setCounter and it will be update in the parent component also.
Child:
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;
Parent:
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;
If you need the Counter reference in the Products component you should define it in the component itself and pass the function reference down to the child component.
Try to change your code like this:
Products component:
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;
ProductList component
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;
However, if you need to pass the function down multiple levels, you should probably use the Context API, but from the question, I presume you just need to go down one level.