title: How to click programmatically a child component? react
body: <p>I have two components, the parent and child. Currently I have these codes below. But unfortunately it returns an error:</p>
  <blockquote>
  <p>TypeError: Cannot read property 'click' of null</p>
  </blockquote>
  <p>For some reasons I want when button is click the Item component also will be click. But these codes below produces an error above. Anyone does know how to achieve it?
  import React, { useRef } from 'react';</p>
  <pre><code>const App = (props) =&gt; {
    const itemRef = useRef(null);
    
    return (
      &lt;div&gt;
      {dynamicBoolean ? (
           &lt;button onClick={() =&gt; itemRef.current.click()}&gt;
              click item
          &lt;/button&gt;
      ) : (
          //more codes here
          &lt;Item ref={itemRef} /&gt;
      )}  
      &lt;/div&gt;
    );
  };
  
  export default App;
  </code></pre>
  <p><strong>Child component</strong> would look like below (demonstration purposes, the code is very lengthly)</p>
  <pre><code>import React from 'react';
  
  const Item = (props) =&gt; {
    
    return (
      &lt;div&gt;
          //some design here
      &lt;/div&gt;
    );
  };
  
  export default Item;
  </code></pre>