How to pass the props value from the other sibling components in React JS-CodePudding

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) {
}

CodePudding user response：

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 
}

CodePudding user response：

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>
    )
}