title: function inside stateless component
body: <p>before someone as this duplicate to this question 
  <a href="https://stackoverflow.com/questions/3212477/can-you-write-nested-functions-in-javascript">Can you write nested functions in JavaScript?</a></p>
  
  <p>I am wondering if we can do something like this? </p>
  
  <pre><code>const toolbar = (props) =&gt; {
  let sidedrawer = false;
  
    showSideDrawer = () =&gt; {
      sidedrawer = !sidedrawer
    }
  
    return (
      &lt;header className={Classes.Toolbar} purchasingHandlerClose={this.showSideDrawer}&gt;
  //Something here
      &lt;/header&gt;
    )
  }
  export default toolbar;
  </code></pre>
  
  <p>More precisely, something like this in functional component </p>
  
  <pre><code> showSideDrawer = () =&gt; {
          sidedrawer = !sidedrawer
        }
  </code></pre>
  
  <p>and then calling it like this </p>
  
  <pre><code>  &lt;header className={Classes.Toolbar} purchasingHandlerClose={this.showSideDrawer}&gt;
  </code></pre>
  
  <p>Now, I know we can do this stateful component or class but then again in JS, Class is just syntactical sugar (still trying to figure out the meaning of the phrase), so how can we implement something like this in stateless or functional component?</p>