title: State update in React JS not working properly
body: <p>My react state seems to be one step behind. After going through answers to similar questions, it seems the solution is a useEffect hook. I've tried and haven't come up with a way to implement useEffect to solve my issue. I need values to show it's current state when I console log it. Please help</p>
  <pre><code>const [productId,setProductId] = useState(&quot;&quot;)
  const [quantity, setQuantity] = useState(1)
  const [itemName,setItemName] = useState(&quot;&quot;)
  const [values, setValues] = useState({})
                                     
  
  &lt;Input name={item.title} id={item.id} type=&quot;number&quot;
  onChange={(e)=&gt;{setQuantity(e.target.value)
                  setItemName(e.target.name)}} /&gt;
  &lt;Button color=&quot;info&quot; size=&quot;sm&quot; 
  onClick={ ()=&gt;{
  setSelectedItems(prevItems=&gt;{ 
  return [...prevItems, {name:itemName,quantity:quantity}] })
  setValues(prevState=&gt;{ return {...prevState, items: selectedItems } })
  }}&gt; Add &lt;/Button&gt;
  
  &lt;Button
    color=&quot;info&quot;
    onClick={()=&gt;console.log(values)}
    disabled={!isLoading}
  &gt;Click me
  &lt;/Button&gt; 
  
  </code></pre>
  <p>Link to sandbox that recreates the problem:
  <a href="https://codesandbox.io/s/sharp-panini-8oc4g?file=/src/App.js" rel="nofollow noreferrer">https://codesandbox.io/s/sharp-panini-8oc4g?file=/src/App.js</a></p>
  <p>After selecting items and clicking 'click me' at the bottom, the items array in values is one step behind the selected items displayed on the UI. In the image below, I clearly added 3 items but clicking 'click me' shows only two in the items array.</p>
  <p><a href="https://i.stack.imgur.com/6kQrp.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/6kQrp.png" alt="enter image description here" /></a></p>