title: Failed to set State on onClick event to store id of clicked element by using useState
body: <p>I'm trying to set of my useState to <code>id of clicked element</code> when user clicked it. But it shows empty string when i'm trying to console it and dispatch it. So, it feels like it didn't successfully set the state. and I don't know why.</p>
  <p>This is the snippet code of it:</p>
  <pre><code>const Game = () =&gt; {
     const [gameMode, setGameMode] = useState('');
     const dispatch = useDispatch();
  
     return (
         &lt;div id='computer' className='to-play-computer' onClick={(e) =&gt; {
              setGameMode(e.currentTarget.id); // THIS DOESN'T CHANGE THE gameMode state to id 'computer'
              
              // WAIT UNTIL THIS FUNCTION DONE
              handleClickGameMode(e)
                   .then(() =&gt; {
                       console.log(gameMode); // IT WILL CONSOLE EMPTY STRING
                       dispatch(isGamePlay(gameMode));
                   })
         }}&gt;
              &lt;div className='icon-gameplay'&gt;
                  &lt;FaRobot /&gt;
              &lt;/div&gt;
              &lt;p className='description-gameplay'&gt;
                  vs Computer
              &lt;/p&gt;
         &lt;/div&gt;
     )
  }
  </code></pre>
  <p>But if assigned it to simple variable, like this:</p>
  <pre><code>let gameMode = &quot;&quot;; // This will store the id of clicked element
  const dispatch = useDispatch();
      
         return (
             &lt;div id='computer' className='to-play-computer' onClick={(e) =&gt; {
                  gameMode = e.currentTarget.id // changed
                  
                  // WAIT UNTIL THIS FUNCTION DONE
                  handleClickGameMode(e)
                       .then(() =&gt; {
                           console.log(gameMode); // IT WILL SUCCESSFULY CONSOLE 'COMPUTER'
                           dispatch(isGamePlay(gameMode));
                       })
             }}&gt;
                  &lt;div className='icon-gameplay'&gt;
                      &lt;FaRobot /&gt;
                  &lt;/div&gt;
                  &lt;p className='description-gameplay'&gt;
                      vs Computer
                  &lt;/p&gt;
             &lt;/div&gt;
         )
  </code></pre>
  <p>So, how to make this successful using useState? And maybe you can explain me why did this happened? Because in other projects I've created, <strong>like setState from onChange input form</strong>, it didn't create this problem. Thank you.</p>