title: return component with hook in react?
body: <p>I have 2 components. I want to keep component A clean, hence I don't wish to use useState in it, I wish to use useState in component B, but since the component B isn't a hook (because it return the jsx as well), how can I call stateHandler in component A?</p>
  
  <pre><code>const ComponentA = () =&gt; {
      return (
        &lt;div&gt;
          &lt;ComponentB /&gt;
          &lt;button onClick={()=&gt;{
            //what to do here to control the state of component B?
          }}&gt;show component B&lt;/button&gt;
        &lt;/div&gt;
      )
  }
  
  const ComponentB = () =&gt; {
    //I don't want to move this setShowBlock to index.js for clean code purpose
    const [showBlock, setShowBlock] = useState(false)
    return (
      &lt;div&gt;
        {showBlock &amp;&amp; &lt;div&gt;component B&lt;/div&gt;}
      &lt;/div&gt;
    )
  }
  </code></pre>
  
  <p><a href="https://stackblitz.com/edit/react-ggtt87?file=index.js" rel="nofollow noreferrer">https://stackblitz.com/edit/react-ggtt87?file=index.js</a></p>