I have question regarding sending clicked value to the first sibling components and I will send the props value to the second siblings is that possible?
I have module where when I click the Category Items to the first siblings the Products on the second sibling will change based on the category name that I click on the first sibling.
Here is my Parent Components:
function BuyerCategoryPage(props) {
return (
<div>
<CategorySlider />
<CategoryProducts/>
</div>
)
}
export default BuyerCategoryPage
First Sibling CategorySlider.js:
const HandleChangeProductCat = (value) => {
console.log(value);
// send the value to the second sibling
}
return (
<div>
<Container fluid>
<Slider style={{paddingTop:20, margin: '0 auto'}} {...settings}>
{
SlideData.map((data) => {
return (
<div key={data.id} >
<div className="sliderDataCategory">
<h6>
<Container>
<Row>
<Col md={3}>
<img className="img-fluid" src={data.cat_image} />
</Col>
<Col >
<label onClick={() => HandleChangeProductCat(data.cat_title)}>{data.cat_title}</label>
</Col>
</Row>
</Container>
</h6>
</div>
</div>
)
})
}
</Slider>
</Container>
</div>
)
Second Sibling CategoryProducts.js
function CategoryProducts(props) {
}
The simplest would be to lift state up into the BuyerCategoryPage component and pass an "onChange" handler to CategorySlider and the state value to CategoryProducts
function BuyerCategoryPage(props) {
const [state, setState] = React.useState(); // common state
return (
<div>
<CategorySlider onChange={setState} /> // pass updater function
<CategoryProducts value={state} /> // pass state value
</div>
);
}
CategorySlider
const handleChangeProductCat = (value) => {
console.log(value);
props.onChange(value); // invoke callback and pass new value
}
CategoryProducts
function CategoryProducts({ value }) { // access the passed value
// use the `value` prop as necessary
}
For example:
function Example() {
const [value, setValue] = useState("");
const onClick = (someValue) => {
setValue(someValue);
}
return (
<div>
<First onClick={onClick} />
<Second value={value} />
</div>
)
}
function First(props) {
const onClick = () => {
props.onClick((new Date()).toString());
}
return (
<input type="button" onClick={onClick} value="Click me" />
)
}
function Second(props) {
return (
<div>{props.value}</div>
)
}