Hey Guys I have an irritating problem with my code. I am rendering the user name and logout button in the navbar based on whether the user is not null and if it is null then I am rendering sign-in and sign-up links. But the problem arises it keeps saying that Cannot read properties of null (reading ‘user’) so if it is null it should render the navbar with sign-in and sign-up but it is giving an error can anybody solve my problem.
App.js
import { Switch, Route } from "react-router-dom";
import Home from "./pages/Home";
import SignInSide from "./pages/SignIn";
import SignUpSide from "./pages/SignUp";
import SignUpUser from "./pages/SignUpUser";
import AddAdmin from "./pages/AddAdmin";
import Dashboard from "./pages/Dashboard";
import AppAppBar from "./components/AppAppBar";
import withRoot from "./withRoot";
import { UsersContextProvider } from "./global/UsersContext";
import { SellersContextProvider } from "./global/SellersContext";
import { VerifySellersContextProvider } from "./global/VerifySellersContext";
import { RejectSellersContextProvider } from "./global/RejectSellersContext";
import { useEffect, useState } from "react";
import { auth, db } from "../src/config/Config";
function App() {
//create a state to store user data
const [userData, setuserData] = useState(null);
useEffect(() => {
//check if any change in auth state change
auth.onAuthStateChanged((user) => {
if (user !== null) {
console.log(user);
db.collection("SignedUpUsersData")
.doc(user.uid)
.get()
.then((snapshot) => {
//set teh userData STATE
setuserData({
user: snapshot.data().Name,
});
});
} else {
setuserData({
user: null,
});
}
});
}, []);
return (
<div>
<RejectSellersContextProvider>
<VerifySellersContextProvider>
<SellersContextProvider>
<UsersContextProvider>
{/* This is where the user object have been passed and it is navbar */}
<AppAppBar user={userData} />
<Switch>
<Route path="/" exact>
<Home />
</Route>
<Route path="/dashboard">
<Dashboard />
</Route>
<Route path="/signin">
<SignInSide />
</Route>
<Route path="/signup">
<SignUpSide />
</Route>
<Route path="/signupuser">
<SignUpUser />
</Route>
<Route path="/addadmin">
<AddAdmin />
</Route>
</Switch>
</UsersContextProvider>
</SellersContextProvider>
</VerifySellersContextProvider>
</RejectSellersContextProvider>
</div>
);
}
export default withRoot(App);AppAppBar.js
import * as React from "react";
import Box from "@mui/material/Box";
import Link from "@mui/material/Link";
import AppBar from "../subcomponents/AppBar";
import Toolbar from "../subcomponents/Toolbar";
import Button from "@mui/material/Button";
import Stack from "@mui/material/Stack";
import { Link as RouterLink } from "react-router-dom";
import { auth } from "../config/Config";
import { useHistory } from "react-router-dom";
const rightLink = {
fontSize: 16,
color: "common.white",
ml: 3,
};
const button = {
fontSize: 16,
color: "red",
ml: 3,
cursor: "pointer",
};
function AppAppBar({ user }) {
const history = useHistory();
const logut = () => {
auth.signOut().then(() => {
history.push("/signin");
console.log("user has singned out");
});
};
console.log(user);
return (
<div>
<AppBar position="fixed">
<Toolbar
sx={{ justifyContent: "space-between", backgroundColor: "black" }}
>
<Box sx={{ flex: 1, display: "flex", justifyContent: "flex-start" }}>
<Link
component={RouterLink}
to="/"
variant="h6"
underline="none"
color="inherit"
sx={{ fontSize: 24, color: "white" }}
>
{"tenderdash"}
</Link>
</Box>
<Box sx={{ flex: 1, display: "flex", justifyContent: "flex-end" }}>
<Link
color="inherit"
variant="h6"
underline="none"
href="/premium-themes/onepirate/sign-in/"
sx={rightLink}
>
{"Products"}
</Link>
<Link
color="inherit"
variant="h6"
underline="none"
href="/premium-themes/onepirate/sign-in/"
sx={rightLink}
>
{"List Equipments"}
</Link>
<Link
color="inherit"
variant="h6"
underline="none"
href="/premium-themes/onepirate/sign-in/"
sx={rightLink}
>
{"Contact Us"}
</Link>
{/* if there is not a user */}
{user.user === null && (
<div>
<Link
component={RouterLink}
to="/signin"
color="inherit"
variant="h6"
underline="none"
sx={rightLink}
>
{"SignIn"}
</Link>
<Link
component={RouterLink}
to="/signup"
variant="h6"
underline="none"
sx={rightLink}
>
{"Sign Up"}
</Link>
</div>
)}
{/* if there is a user */}
{user.user && (
<>
<Link variant="h6" underline="none" sx={rightLink}>
{user.user}
</Link>
<Link onClick={logut} sx={button} variant="h6">
Logout
</Link>
</>
)}
{/* if the user is admin */}
{/* <Link
component={RouterLink}
to="/dashboard"
variant="h6"
underline="none"
sx={{ ...rightLink, color: "secondary.main" }}
>
{"Admin Console"}
</Link> */}
</Box>
</Toolbar>
</AppBar>
<Toolbar />
</div>
);
}
export default AppAppBar;>Solution :
When you initialize userData , you are initializing with null, then in your component AppAppBar in the line user.user is the same than null.user, this is the error.
You should replace this:
const [userData, setuserData] = useState(null)
by:
const [userData, setuserData] = useState({user: null})