title: How to pass the onClick() event to a child component from a button in the parent component in React?
body: <p>Let's say I have two components Component1 and Component2. I have a button in Component1.</p>
  <pre><code>const Component1 = () =&gt; {
      return(
          &lt;div&gt;
          &lt;button onClick={()=&gt;someExportFunc()}&gt;Export&lt;/button&gt;
          &lt;Component2 /&gt;
      &lt;/div&gt;
      )
  }
  </code></pre>
  <p>My <code>Component2.jsx</code> is something like this.</p>
  <pre><code>import {ChartComponent} from '@xyz/charts';
  
      
  const Component2 = () =&gt; {
      let chartInstance = new ChartComponent();
  
      return (
                  &lt;ChartComponent
                  id='chart1'
                  ref={chart = chartInstance =&gt; chart}
  
                  &gt;
  
                  &lt;/ChartComponent&gt;
          )
  
  }
  
  </code></pre>
  <p>Now the function <code>someExportFunc()</code> is defined inside the <code>{ChartComponent}</code> being imported in <code>Component2.jsx</code>.</p>
  <p>Had I used the button inside Component2, it would have worked simply. As in,</p>
  <pre><code>import {ChartComponent} from '@xyz/charts'
  
      
  const Component2 = () =&gt; {
      let chartInstance = new ChartComponent();
  
      return (
                  &lt;button onClick={()=&gt;someExportFunc()}&gt;Export&lt;/button&gt;
                 &lt;ChartComponent
                  id='chart1'
                  ref={chart = chartInstance =&gt; chart}
  
                  &gt;
  
                  &lt;/ChartComponent&gt;
          )
  
  }
  </code></pre>
  <p>But how can I make it work as a button in Component1?</p>
  <p>I am guessing it has something to do with defining state of the button and then passing the state down, but I don't exactly understand how the state of a button works. <code>onClick()</code> should be some instantaneous boolean, isn't it? By instantaneous, I mean it would change as soon as the 'click' is over.</p>
  <p><strong>Edit1</strong>: Okay, so the <code>someExportFunc()</code> is a library function defined in my import. It makes use of the <code>chartInstance</code> created in Component2. It's actual use case is</p>
  <pre><code>&lt;button 
     value='export'
     onClick={() =&gt; chartInstance.exportModule.export('PNG', 
         `image`)}&gt;
          Export
        &lt;/button&gt;
  </code></pre>
  <p>So basically I want it so that when I click the button within Component1, it sends the onClick event to my ChartComponent in Component2.</p>