React UseContext causes errors - reactjs

Question

I'm using code from a tutorial, which uses createContext and I'm kind of confused on what exactly it's doing, and I believe that it's causing errors where I wouldn't necessarily expect. I have two components, Dashboard and Login which are different pages of my web app. It generates the error: Unhandled Rejection (TypeError): Cannot read property 'data' of undefined For some reason, the following line in Dashboard.js:
function Dashboard() {
const [favPokemons, setFavPokemons] = useState([]);
const { userData, setUserData } = useContext(UserContext);
setFavPokemons(userData.user.favPokemon); // This line is the problematic line
}
causes an error in Login.js in its try catch clause:
import UserContext from "../../context/userContext";
import ErrorNotice from "../misc/ErrorNotice";
function Login () {
const [email, setEmail] = useState();
const [password, setPassword] = useState();
const [error, setError] = useState();
const { setUserData } = useContext(UserContext);
const history = useHistory();
const submit = async (e) => {
e.preventDefault();
try{
const loginUser = {email, password};
const loginResponse = await axios.post("https://minipokedexbackend.herokuapp.com/users/login", loginUser);
console.log(userData); // line Login.js:21 is in image below line 22
console.log(loginResponse) // line Login.js:22, log is in image below
setUserData({
token: loginResponse.data.token,
user: loginResponse.data.user
});
localStorage.setItem("auth-token", loginResponse.data.token);
history.push("/dashboard");
} catch(err) {
err.response.data.msg && setError(err.response.data.msg)
}
};
Could someone explain what createContext and why it would be causing an error in two seemingly unrelated components? I have a feeling that it has to do with userData not quite being generated when Dashboard is rendered?
EDIT:
Sorry for the lack of information, data referenced in the Login.js file is data from my server accessing mongoDB. Its response contains token and user info, which includes their id, displayname and an array of favpokemon
Here's userContext.js:
import { createContext } from 'react';
export default createContext(null);
Here's App.js:
function App() {
const [ userData, setUserData] = useState({
token: undefined,
user: undefined
});
return (
<BrowserRouter>
<UserContext.Provider value={{ userData, setUserData }}>
<Header />
<Switch>
<Route exact path="/" component={Home} />
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<Route path='/dashboard' component={Dashboard}/>
</Switch>
</UserContext.Provider>
</BrowserRouter>
);
}
App.js also contains some functions to check if the user is logged in.

Answer 1

With the info you provided in the question, I managed to create a structure of your code. There might be logic or syntax errors because of the lack of information, but I want you to have a general idea how to use Context Hook during login.
UserContext.tsx
import React, { createContext, useState } from "react";
//create the context
export const UserContext = createContext<any>(undefined);
//create the context provider, we are using useState to ensure that we get reactive values from the context
export const UserProvider: React.FC = ({ children }) => {
//the reactive values
const [email, setEmail] = useState<string>("");
const [password, setPassword] = useState<string>("");
const [userData, setUserData] =setUserData({
token: '',
user: ''
});
//the store object
let state = {
email,
setEmail,
password,
setPassword,
userData.
setUserData
};
//wrap the application in the provider with the initialized context
return <UserContext.Provider value={state}>{children}</UserContext.Provider>;
};
export default UserContext;
Login.tsx
import UserContext from "../../context/userContext";
import ErrorNotice from "../misc/ErrorNotice";
function Login () {
const [error, setError] = useState();
const { email, setEmail, password, setPassword, userData, setUserData } = useContext(UserContext);
const history = useHistory();
const submit = async (e) => {
e.preventDefault();
try{
const loginUser = {email, password};
const loginResponse = await axios.post("https://minipokedexbackend.herokuapp.com/users/login", loginUser);
console.log(userData); // line Login.js:21 is in image below line 22
console.log(loginResponse) // line Login.js:22, log is in image below
setUserData({
token: loginResponse.data.token,
user: loginResponse.data.user
});
localStorage.setItem("auth-token", loginResponse.data.token);
history.push("/dashboard");
} catch(err) {
err.response.data.msg && setError(err.response.data.msg)
}
};
export default Login;
Dashboard.tsx
import UserContext from "../../context/userContext";
import ErrorNotice from "../misc/ErrorNotice";
import React, { useState, useEffect } from "react";
const Dashboard: React.FC = () => {
const [favPokemons, setFavPokemons] = useState([]);
const { userData, setUserData } = useContext(UserContext);
useEffect(() => {
setFavPokemons(userData?.user?.favPokemon);
}, []);
}
}
export default Dashboard;
App.tsx
Here I'm using a ternary expression. If (userData.token), got to dashboard otherwise go to Login Page.
function App() {
const { userData} = useContext(UserContext);
return (
<UserProvider>
<BrowserRouter>
<Header />
<Switch>
{!userData?.token ? (
<>
<Route path="/register" component={Register} />
<Route path="/login" component={Login} />
<Redirect exact from="/" to="/login" />
</>
) : (
<>
<Route exact path="/" component={Home} />
<Route path='/dashboard' component={Dashboard}/>
<Redirect exact from="/" to="/dashboard" />
</>
)
</Switch>
</BrowserRouter>
</UserProvider>
);
}

Answer 2

Try to make a habit of using null checks when you’re accessing nested values of a response.
setFavPokemons(userData.user.favPokemon);
Here, modify this line to:
setFavPokemons(userData?.user?.favPokemon);
Also, do you mind doing a console log on userData object or share the corresponding reducer to check whether the shape of the data is same or not?