title: Pass callback function from parent component to child component react
body: <p><strong>GOAL:</strong> Send callback function from parent to child to toggle sidebar component.</p>
  <p>This code opens the sidebar:</p>
  <pre><code>&lt;Sidebar show={status} /&gt;
  
    &lt;button onClick={() =&gt; setStatus((status) =&gt; !status)}&gt;
        &lt;SettingsIcon/&gt;
    &lt;/button&gt;
  </code></pre>
  <p>I use both true and false values for <code>status</code> to toggle the sidebar on and off.</p>
  <p>Now, in my sidebar component, I need to pass a <code>false</code> value to <code>show</code> so that is closes when my <code>Back</code> button is clicked.</p>
  <pre><code>const Sidebar = ({ show }) =&gt; {
    const { left } = useSpring({
      from: { left: &quot;-100%&quot; },
      left: show ? &quot;0&quot; : &quot;-100%&quot;,
    });
  
    return (
      &lt;animated.div
        style={{
          left: left,
          position: &quot;absolute&quot;,
          height: &quot;100%&quot;,
          width: &quot;55%&quot;,
          backgroundColor: &quot;black&quot;,
          zIndex: 1,
        }}
        className=&quot;Sidebar&quot;
      &gt;
        &lt;button onClick={() =&gt; !show}&gt;Back&lt;/button&gt;
        &lt;p&gt;hello&lt;/p&gt;
      &lt;/animated.div&gt;
    );
  };
  </code></pre>
  <p>I can't seem to get it working. Any ideas what I am doing wrong?</p>