context api state changes but doesn't reflects untill refreshes browser - reactjs

Question

I am updating state and storing token in local storage.
After clicking the login button the state changes but doesn't go the dashboard page until I refresh the browser tab.
Why it is not automatically detecting state and updating it?
Logic: If the token is available in local storage it should redirect it to the dashboard. otherwise, the login page should appear and after authentication should redirect to the dashboard.
Below are the user context and Login page
UserContext
import React, { createContext, Component } from 'react';
import { Redirect } from 'react-router-dom';
export const UserContext = createContext();
class UserContextProvider extends Component {
state = {
isLoading: false,
isAuthenticated: false,
token: null,
UserName: null,
Email: null,
Role: null
}
auth = (auth, profile) => {
this.setState = ({
isAuthenticated: auth,
}, () => { });
if (profile) {
localStorage.setItem("token", profile.token);
this.setState = ({
token: profile.token
}, () => { });
} else {
this.setState = ({
token: null,
UserName: null,
Email: null,
Role: null
});
}
}
isLoading = load => {
this.setState({ isLoading: load })
}
logout = () => {
localStorage.removeItem("token")
this.setState({
isAuthenticated: false,
token: null,
UserName: null,
Email: null,
Role: null
})
}
componentDidMount = async () => {
if (localStorage.getItem("token")) {
const base64Url = localStorage.getItem("token").split('.')[1];
const base64 = base64Url.replace('-', '+').replace('_', '/');
var tokenData = (JSON.parse(window.atob(base64)));
await this.setState({
isAuthenticated: true,
token: localStorage.getItem("token"),
UserName: tokenData.name,
Email: tokenData.email,
Role: tokenData.role
});
}
return <Redirect to="/login" />
}
render() {
return (
<UserContext.Provider value={{ ...this.state, auth: this.auth, isLoading: this.isLoading, profileData: this.profileData, logout: this.logout }}>
{this.props.children}
</UserContext.Provider>
);
}
}
export default UserContextProvider;
Login.jsx
const Login = () => {
const { auth, profileData, token, isAuthenticated } = useContext(UserContext);
const [email, setemail] = useState('');
const [password, setpassword] = useState('');
const [error, setError] = useState(null)
const handlesubmit = (e) => {
e.preventDefault();
const user = {
Email: email,
Password: password,
}
axios.post("http://localhost:2000/user/", user)
.then(res => {
if (res.data.error) {
setError(res.data.msg);
auth(res.data.valid, null);
} else if (res.data.valid) {
setError(null);
auth(res.data.valid, res.data)
}
}).catch(error => {
console.log(error)
});
}
return (
<div>
{console.log(isAuthenticated, token)}
{isAuthenticated ? <Redirect to='/dashboard' /> : <Redirect to='/login' />}
<div className="container mt-5">
<div className="col-md-6 mx-auto text-center">
<div className="header-title">
<h1 className="wv-heading--title">
Login Here!
</h1>
</div>
</div>
<div className="row mt-5">
<div className="col-4 mx-auto">
<div className="myform form ">
<form onSubmit={handlesubmit}>
<div className="form-group">
<input type="email" name="email" value={email} onChange={(e) => { setemail(e.target.value) }} className="form-control" id="email" placeholder="Email" required />
</div>
<div className="form-group">
<input type="password" value={password} name="password" onChange={(e) => { setpassword(e.target.value) }} id="password" className="form-control" placeholder="Password" required />
</div>
{
error ?
<div className="mt-3 mb-3">
<p style={{ color: "red", fontSize: "8" }}> <b>Error :</b> {error}</p>
</div>
:
null
}
<div className="text-center ">
<button type="submit" className="btn btn-outline-info">Login</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
)
}
export default Login;

Answer 1

I got it.
There was a mistake in setState in user context auth function.