title: How to make async/await function till state update in MERN Stack Application
body: <p>I want to make my function await till <code>chosenImage</code> state update. I can see the updated state in the console.log out of the <code>addToCart</code> function, but the console.log inside returns empty string. How can I make it await till state update?</p>
  <p>Here is what I mean:</p>
  <pre><code>const [chosenImage, setChosenImage] = useState('');
      
  console.log(chosenImage)
      
  const addToCart = (user, product) =&gt; {
  
    console.log(chosenImage)
  
    const cartProduct = {
      _id: product._id,
      name: product.name,
      description: product.description,
      processor: product.processor,
      ram: product.ram,
      storage: product.storage,
      price: product.price,
      type: product.type,
      likes: product.likes,
      colors: product.colors,
      images: chosenImage
    }
  
    fetch(`${API}/cart/usercart`, {
      method:&quot;POST&quot;,
      headers: { 
        'Content-Type': 'application/json'
      },
      body: JSON.stringify([user._id, cartProduct])
    })
    .then(response =&gt; response.json())
    .then(response =&gt; {
      const updatedCart = response.cart;
      setUser(oldState =&gt; ({...oldState, cart: [updatedCart]}))
      localStorage.setItem(&quot;cart&quot;, JSON.stringify(updatedCart))
    })
    .catch(error =&gt; console.log(error))
  }
  </code></pre>