title: How to set one component data into other component
body: <p>I have 2 component. one is header component and another is home component.</p>
  <p>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.</p>
  <p>header.jsx</p>
  <pre><code>const Header = () =&gt; {
    const handleSelect = (e) =&gt; {
      console.log(e);
  
    }
      return (
        &lt;div className=&quot;container&quot;&gt;
          &lt;div className=&quot;filelist&quot;&gt;
            &lt;div className=&quot;add_to_cart fa fa-shopping-cart fa-2x&quot;&gt;&lt;span className=&quot;item_in_cart&quot;&gt;{}&lt;/span&gt;&lt;/div&gt;
          &lt;/div&gt;
          &lt;/div&gt;
      )
  }
  export default Header;
  </code></pre>
  <p>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</p>
  <pre><code>const DisplayDataAtHome = () =&gt; {
     const json_data=[{
      &quot;merchant_id&quot;: 1,
      &quot;medium_egg&quot;: 104,
      &quot;small_egg&quot;: 100,
      &quot;desi_egg&quot;: 110,
      &quot;d_keshor_egg&quot;: 98
    }, {
      &quot;merchant_id&quot;: 2,
      &quot;big_egg&quot;: 90,
      &quot;medium_egg&quot;: 104,
      &quot;desi_egg&quot;: 112,
      &quot;d_keshor_egg&quot;: 100
    }]
    const AddToCart=(e)=&gt;{
      alert(e.target.value)
      var element=document.getElementsByClassName('addToCart');
      element[0].classList.add(&quot;hideIt&quot;);
    }
      return (
        &lt;&gt;
        &lt;Header /&gt;
        &lt;table className=&quot;outerdiv&quot; style={{align:'center'}}&gt;{
        json_data.map((val, i)=&gt;(
          &lt;&gt;
          {
              val['big_egg']  &amp;&amp;  
              &lt;div className=&quot;innerDiv&quot;&gt;
                  
                     &lt;img src={bigegg}&gt;&lt;/img&gt;
                     &lt;p align=&quot;left&quot;&gt;Big Egg&lt;/p&gt;
                     &lt;p align=&quot;left&quot;&gt;weight: 500gm.&lt;/p&gt;
                     &lt;p align=&quot;left&quot;&gt;{&quot;₹&quot;+val.big_egg+&quot;/-&quot;}&lt;button className=&quot;addToCart&quot; onClick={e=&gt;AddToCart(e)}&gt;AddToCart&lt;/button&gt;&lt;/p&gt;
                  &lt;/div&gt;
          }
          {
              val['desi_egg'] &amp;&amp; 
              &lt;div className=&quot;innerDiv&quot;&gt;
                  
                      &lt;img src={smallegg}&gt;&lt;/img&gt;
                      &lt;p align=&quot;left&quot;&gt;Small Egg&lt;/p&gt;
                      &lt;p align=&quot;left&quot;&gt;weight: 500gm.&lt;/p&gt;
                      &lt;p align=&quot;left&quot;&gt;{&quot;₹&quot;+val.desi_egg+&quot;/-&quot;}&lt;button&gt;ADD&lt;/button&gt;&lt;/p&gt;
                  &lt;/div&gt;
          }
          &lt;/&gt;
      ))
        }
        &lt;/table&gt;
        &lt;/&gt;
      )
  }
  export default DisplayDataAtHome;
  </code></pre>
  <p>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?</p>