title: How to access a hook setter in an onClick function
body: <p>I'm rewriting a class component to a functional component, but i can't figure out how to access a hook setter in an onClick function.</p>
  
  <p>I declare the hook as usual, which is a variable and a setter for accessing a username :</p>
  
  <pre><code>export function Header(props: IHeaderProps) {
  
      const [username, setUsername] = useState('');
  
  
      // set username in header if found in storage
      useEffect(() =&gt; {
          const token = JSON.parse(localStorage.getItem(TOKEN_NAME) || '{}');
  
          if(token.Username) {
          setUsername(token.Username);
          }
      });......
  </code></pre>
  
  <p>In the JSX i have a "Sign out" button. When clicked, it invokes the handleLogout function, where i need to set the username to empty string:</p>
  
  <pre><code>    ....
      &lt;span className="ms-Grid-col ms-u-sm4"&gt;&lt;DefaultButton onClick={handleLogout} text="Log out" /&gt;&lt;/span&gt;
      ....
  
  function handleLogout() {
      ...
      // how can i set the username to empty string here?
  }
  </code></pre>
  
  <p>But how can i achieve this? When this was a class component i had access to the state variable, what is the proper way to deal with this using hooks? I'm using typescript with the "cannot use lambda in the markup" rule</p>