title: Why the onClick function works inside the jsx and don't work outside the return statement
body: <p>Why the onClick function works inside the jsx and don't work outside the return statement</p>
  <pre><code>import React, { useState } from &quot;react&quot;;
      
  function Menu({ items }) {
        const [displayChildren, setDisplayChildren] = useState({});
        console.log(displayChildren);
      
        return (
          &lt;ul&gt;
            {items.map((item) =&gt; {
              return (
                &lt;li key={item.title}&gt;
                  {item.title}{&quot; &quot;}
                  {item.children &amp;&amp; (
                    &lt;button
                      onClick={() =&gt; {
                        setDisplayChildren({
                          ...displayChildren,
                          [item.title]: !displayChildren[item.title],
                        });
                      }}
                    &gt;
                      {displayChildren[item.title] ? &quot;-&quot; : &quot;+&quot;}
                    &lt;/button&gt;
                  )}
                  {displayChildren[item.title] &amp;&amp; item.children &amp;&amp; (
                    &lt;Menu items={item.children} /&gt;
                  )}
                &lt;/li&gt;
              );
            })}
          &lt;/ul&gt;
        );
      }
      export default Menu;
  </code></pre>
  <p>but when I make the onclick function outside as such it does not do anything</p>
  <pre class="lang-js prettyprint-override"><code>  const buttonHandler = (item) =&gt; {
      setDisplayChildren({
        ...displayChildren,
        [item.title]: !displayChildren[item.title],
      });
    };
  </code></pre>