title: React useState hook not updating with axios call
body: <p>I am aware this is a common question as I have spent the last two hours going through every answer and trying to get my state to update but nothing is working.</p>
  <p>I am fetching text from a cms however on first load the state is undefined and my app crashes. However if I comment the line out, load the page and uncomment the line the correct values are displayed.</p>
  <p>Here is some of the code I have tried.</p>
  <p>The data i am hoping to get</p>
  <pre><code>[
    {id:1},
    {id:2},
    {id:3},
    {id:4},
  ]
  </code></pre>
  <pre><code>import react, {useEffect, useState} from 'react'
  import axios from 'axios'
  
  const [carouselTitle, setCarouselTitle] = useState([])
  
  useEffect(() =&gt; {
            fetchData();
      }, []);
  
  
      const fetchData = async () =&gt; {
          await axios('api').then(
              response =&gt; {
                  console.log(response.data)
                  setCarouselTitle(response.data)
                  console.log(carouselTitle)
              })
        };
  </code></pre>
  <pre><code>return(
    &lt;h1&gt;{carouselTitle[1].id}&lt;/h1&gt;
  )
  </code></pre>
  <p>console logging the data works fine but when i console log the state it does not work.</p>
  <p>2ND METHOD I TRIED</p>
  <pre><code>    useEffect(() =&gt; {
          const fetchData = async () =&gt; {
           const res = await axios('api');
           const carouselTitleAlt = await res.data;
           setCarouselTitle({ carouselTitleAlt });
           console.log(carouselTitleAlt);
           console.log(carouselTitle);
         };
         fetchData();
        }, []);
  </code></pre>
  <p>Again console logging the const inside the useEffect displays the correct information but logging the state does not work.</p>
  <p>Appreciate your responses or better ways of displaying the data.</p>