如何将一个组件数据设置到另一个组件

Question

I have 2 component. one is header component and another is home component.

I have create the cart on header component. But in home component when I click on addToCart button the value should be changed on cart.

header.jsx

const Header = () => {
  const handleSelect = (e) => {
    console.log(e);

  }
    return (
      <div className="container">
        <div className="filelist">
          <div className="add_to_cart fa fa-shopping-cart fa-2x"><span className="item_in_cart">{}</span></div>
        </div>
        </div>
    )
}
export default Header;

I want to write the logic in home component like when we click addToCart that value should displayed in cart. But the cart logic I have written in header component. home.jsx

const DisplayDataAtHome = () => {
   const json_data=[{
    "merchant_id": 1,
    "medium_egg": 104,
    "small_egg": 100,
    "desi_egg": 110,
    "d_keshor_egg": 98
  }, {
    "merchant_id": 2,
    "big_egg": 90,
    "medium_egg": 104,
    "desi_egg": 112,
    "d_keshor_egg": 100
  }]
  const AddToCart=(e)=>{
    alert(e.target.value)
    var element=document.getElementsByClassName('addToCart');
    element[0].classList.add("hideIt");
  }
    return (
      <>
      <Header />
      <table className="outerdiv" style={{align:'center'}}>{
      json_data.map((val, i)=>(
        <>
        {
            val['big_egg']  &&  
            <div className="innerDiv">
                
                   <img src={bigegg}></img>
                   <p align="left">Big Egg</p>
                   <p align="left">weight: 500gm.</p>
                   <p align="left">{"₹"+val.big_egg+"/-"}<button className="addToCart" onClick={e=>AddToCart(e)}>AddToCart</button></p>
                </div>
        }
        {
            val['desi_egg'] && 
            <div className="innerDiv">
                
                    <img src={smallegg}></img>
                    <p align="left">Small Egg</p>
                    <p align="left">weight: 500gm.</p>
                    <p align="left">{"₹"+val.desi_egg+"/-"}<button>ADD</button></p>
                </div>
        }
        </>
    ))
      }
      </table>
      </>
    )
}
export default DisplayDataAtHome;

I want whenever I will click on addToCart button the cart value should be changed which is there in header component. How can I solve this problem?

Answer 1

You can pass one component data to another component like this.

In home.jsx: Ex: if we need to pass the total items count to the header, Keep the value in state (ex: cartTotal). When calling AddToCart, add to the 'cartTotal' state value.

Ex: In AddToCart():

AddToCart = () => {
    this.setState ({ cartTotal: cartTotal + 1 });
}

Then you need to pass the value as props from home.jsx to header.jsx like this:

<Header cartTotal={this.state.cartTotal} />

In header.jsx display the total value like this:

<div className="add_to_cart fa fa-shopping-cart fa-2x">
    <span className="item_in_cart">
        {this.props.cartTotal}
    </span>
</div>

Similar to this, you can modify your code to match your actual logic, to pass the item list, exactly using the same logic using this example code.