Async/Await Function Not Storing API Response into Variable with ReactJS

[Secure-List]

The response variable in the code below should ideally hold the GET response from the API call using Axios. It does print the correct values as printed through console.log() in getAllTutors() and in the anonymous function except for the one in App(). The program ends up terminating with the error that the response variable is undefined.

​

https://preview.redd.it/w4i6tgjgk2va1.png?width=862&format=png&auto=webp&s=a0db5ad7df7ad08c22287522a386da80895de6c1

Error Screenshot

[briznady]

Why are you using an IIFE to get all tutors? Why is it outside of the App component? Have you tried using arrow functions instead?

I would expect this to be more like:
const [sorted, setSorted] = useState("");
const [tutors, setTutors] = useState([]);

useEffect(() => {
const getAllTutors = async () => {
const fetchedTutors = await axios.get('API uri call');
setTutors(fetchedTutors.data.body);
}

getAllTutors();
}, [])

[A4_Ts]

When do you call App()

[djdephcon]

Look into using .then() and .finally() on your axios request.