React, onClick only works after second click, Axios, Async/Await

Question

I must be missing something very straight forward. I am trying to make an axios GET request and then setState in an async/await function, I have also tried fetch().then(). The console.log() returns undefined unless I click getData() twice or put it in a separate onClick() event. I think the state is being set correctly but the console.log() doesn't perform as I expect it. Is there a way to console.log() in the same function as the axios request? As always, any help is greatly appreciated. Thanks!

import React, { useState } from "react";
import axios from "axios";

const SalesGraph = () => {
  const [retrievedData, setretrievedData] = useState();

  const getData = async () => {
    try {
      const salesData = await axios.get("http://localhost:5000/sales");
      await setretrievedData(salesData);
      console.log(retrievedData);
    } catch (err) {
      console.log(err);
    }
  };
  const showState = () => {
    console.log(retrievedData);
  };
  return (
    <div>
      <button onClick={getData}>Graph</button>
      <button onClick={showState}>showState</button>
    </div>
  );
};
export default SalesGraph;

Answer 1

setretrievedData is the asynchronous method and you can't get the updated value of retrievedData immediately after setretrievedData.

You need to get it in the useEffect by adding a dependency.

useEffect(() => {
  console.log(retrievedData);
}, [ retrievedData ]);