title: Setting input Value in useState in React
body: <p>I am trying to set some values of inputs through <code>useState()</code> hook below in the code through <code>onChange</code> event and want to get the author id in authorId. But when I <code>console.log()</code> the newObj after putting the values, every other var is set but the auhtorId is returned as it's initial state which is empty string. Can the you tell me what I am doing wrong ?</p>
  <pre><code>import React,{useState} from 'react'
  import { useQuery } from '@apollo/client';
  import {AuthorsQuery }from '../queries/Queries'
  
  
   export const AddBook = () =&gt; {
  
  
  
  const [name, setName]= useState('');
  const [genre, setGenre]= useState('');
  const [authorId, setauthorId]= useState('');
  
  
  
  
  
  const  logSubmit = (event)=&gt;{
     
      event.preventDefault();
      const newObj = {name,genre,authorId}
      console.log(newObj)
    }
  
   
  
  const { loading, error, data } = useQuery(AuthorsQuery);
  
  if (loading) return &lt;p&gt;Loading...&lt;/p&gt;;
   if (error) return &lt;p&gt;Error :(&lt;/p&gt;;
  
   console.log(data);
  
  
  
  
  
  
   
  
    return (
      
      &lt;form id=&quot;add-book&quot; onSubmit={logSubmit}&gt;
      &lt;div className=&quot;field&quot;&gt;
          &lt;label&gt;Book name:&lt;/label&gt;
          &lt;input type=&quot;text&quot; value={name} onChange={(e)=&gt; setName( e.target.value)} /&gt;
      &lt;/div&gt;
      &lt;div className=&quot;field&quot;&gt;
          &lt;label&gt;Genre:&lt;/label&gt;
          &lt;input type=&quot;text&quot; value={genre} onChange={(e)=&gt; setGenre(e.target.value)} /&gt;
      &lt;/div&gt;
      &lt;div className=&quot;field&quot;&gt;
          &lt;label&gt;Author:&lt;/label&gt;
                    &lt;select onChange={(e)=&gt;setauthorId(e.target.key)} value= 
      {author.id } &gt;
               &lt;option disabled&gt;Select Author&lt;/option&gt;
               
                   {data.authors.map(author =&gt;(
                        &lt;option  key={author.id}  &gt;{author.name} &lt;/option&gt;
                       
                   ) )
                  
    }
           
         
             
              
          &lt;/select&gt; 
          
  
      &lt;/div&gt;
      &lt;button &gt;+&lt;/button&gt;
  
    &lt;/form&gt;
    )
   }
  </code></pre>