title: useState displays previous state when getting value from onChange event
body: <p>I don't really have much experience with React but I was trying to work on a small project for myself.</p>
  <p>So I have this dropdown list, which has 2 values, and I'm trying to <code>console.log</code> the current state of <code>camera</code> which should hold the values for the list option that you click on.</p>
  <p>So let's say I click on an option for the 1st time, I get a log of an empty value (the initial state of my <code>camera</code>), then I click on the other option and I get logged the option that I clicked the 1st time. From what I understand this might be due to the fact that <code>setState</code> is async ?</p>
  <p>Even so, what should I do to fix my problem, so that <strong>when I click for the first time on an option it logs the actual option</strong> ? I'm thinking of using <code>useEffect</code> someway but I can't really figure out how to use it for handling <code>events</code>.
  This is my code:</p>
  <pre><code>import React, { useState, useEffect } from 'react'
  import { Link } from 'react-router-dom';
  import style from './Join.module.css';
  
  const Join = () =&gt; {
  
      const [nume, setNume] = useState('')
      const [camera, setCamera] = useState('')
  
  
      return (
          &lt;div className={style.mainJoinContainer}&gt;
              &lt;div className={style.secondaryJoinContainer}&gt;
                  &lt;h1 className={style.header}&gt;
                      Conecteaza-te!
                      &lt;div&gt;
                          &lt;input placeholder=&quot;Nume&quot; className={style.joinInput} type=&quot;text&quot; onChange={(event) =&gt; { setNume(event.target.value); console.log(nume) }} /&gt;
                      &lt;/div&gt;
                      &lt;div className={style.margin}&gt;
                          &lt;label&gt;Camera&lt;/label&gt;
                          &lt;select name=&quot;Camere&quot; placeholder=&quot;Camere&quot; onChange={(event) =&gt; { setCamera(event.target.value); console.log(camera) }}&gt;
                              &lt;option value=&quot;Camere&quot; style={{ display: &quot;none&quot; }}&gt;Camere&lt;/option&gt;
                              &lt;option value=&quot;Gluma&quot;&gt;Gluma&lt;/option&gt;
                              &lt;option value=&quot;Joke&quot;&gt;Jokes&lt;/option&gt;
                          &lt;/select&gt;
                      &lt;/div&gt;
                      &lt;Link to=&quot;/interaction/chat&quot;&gt;
                          &lt;button className={`${style.joinButton} ${style.margin}`} type=&quot;submit&quot;&gt;Logheaza-te&lt;/button&gt;
                      &lt;/Link&gt;
                  &lt;/h1&gt;
              &lt;/div&gt;
          &lt;/div &gt;
      )
  }
  
  export default Join
  </code></pre>
  <p>I will appreciate any sort of guidance for this problem. I've tried looking up some similar situation and tried <code>useEffect</code> or <code>async-await</code> for some reason, but I can't really figure it out myself. Thank you for your time!</p>