When using the data obtained from useContext to verify if the logged-in user is an Admin, there seems to be a delay where it initially returns "undefined" and then after about 5 seconds, it provides the actual value. This causes the code to break since it cannot work with "undefined".
import React, { useContext, useEffect } from 'react';
import { useHistory } from 'react-router-dom';
import { AuthContext } from '../../context/AuthContext';
const Admin = () => {
const history = useHistory();
const { userData } = useContext(AuthContext);
console.log(userData); // ****** Initially shows {token: undefined, user: undefined}
/***************************** Then after a 5-10 seconds delay
* it gives the following data
token: "eyJhbGciOiJIUzI"
user:
isAdmin: true
__v: 0
_id: "5eea03a736b70722c83a7b63"
*******************************************************************/
// Need to get the value of "isAdmin" for further processing
if (!userData.user.isAdmin) {
history.push("/");
};
return <h1>Admin Panel</h1>
};
I wonder if I should use async/await? When attempting to do so in a custom async function, it resulted in another error stating that useContext cannot be used outside of a React function.