Develop Reference

React Web page turning blank after adding a constant

I'm a React newbie and I was following a tutorial on YouTube, which is at the time of writing this approximately 3 months old.
I got to this phase:
However then I ran into a problem. This is a piece of code that works so far:
function App() {
const [theme, colorMode] = useMode();
return (
<ColorModeContext.Provider value={colorMode}>
<ThemeProvider theme={theme}>
<CssBaseline />
<div className='app'>
{/* <Sidebar /> This is the const which causes the web to break for some reason */}
<main className='content'>
<Topbar />
{/* <Routes> */}
{/* <Route path='/' element={<Dashboard />} /> */}
{/* <Route path='/classification' element={<Classification />} /> */}
{/* <Route path='/timetable' element={<Timetable />} /> */}
{/* <Route path='/class' element={<Class />} /> */}
{/* <Route path='/profile' element={<Profile />} /> */}
{/* <Route path='/settings' element={<Settings />} /> */}
{/* <Route path='/notifications' element={<Notifications />} /> */}
{/* <Route path='/calendar' element={<Calendar />} /> */}
{/* </Routes> */}
</main>
</div>
</ThemeProvider>
</ColorModeContext.Provider>
);
}
export default App;
However if I uncomment the <Sidebar /> the page turns blank. As far as I tried to debug, it doesn't matter if the Sidebar file is empty or not, the page turns blank regardless.
As a React newbie, my knowledge is very limited so I haven't tried much aside of debugging. All I know is that the code in the file doesn't affect the error in any way. What I expected to happen is a sidebar to appear on the left with a couple of buttons and an image. Instead the page just turned blank. I assume this is not caused by some outdated dependencies since as I said, the code in the Sidebar file doesn't seem to affect this error. My assumption is a logical mistake I can't manage to find.
I'd love to get any sort of help with this. Furthermore, if anyone knows how to write this piece of code differently, with the same functionality (you can see in the linked video tutorial above), I will definitely be looking forward to seeing your advice. Thanks a bunch!
EDIT: This is the Sidebar file:
import { useState } from "react";
import { ProSidebar, Menu, MenuItem } from "react-pro-sidebar";
import { Box, IconButton, Typography, useTheme } from "#mui/material";
import { Link } from "react-router-dom";
import "react-pro-sidebar/dist/css/styles.css";
import { tokens } from "../../theme";
import HomeOutlinedIcon from "#mui/icons-material/HomeOutlined";
import PeopleOutlinedIcon from "#mui/icons-material/PeopleOutlined";
import ContactsOutlinedIcon from "#mui/icons-material/ContactsOutlined";
import ReceiptOutlinedIcon from "#mui/icons-material/ReceiptOutlined";
import PersonOutlinedIcon from "#mui/icons-material/PersonOutlined";
import CalendarTodayOutlinedIcon from "#mui/icons-material/CalendarTodayOutlined";
import HelpOutlineOutlinedIcon from "#mui/icons-material/HelpOutlineOutlined";
import BarChartOutlinedIcon from "#mui/icons-material/BarChartOutlined";
import PieChartOutlineOutlinedIcon from "#mui/icons-material/PieChartOutlineOutlined";
import TimelineOutlinedIcon from "#mui/icons-material/TimelineOutlined";
import MenuOutlinedIcon from "#mui/icons-material/MenuOutlined";
import MapOutlinedIcon from "#mui/icons-material/MapOutlined";
const Item = ({ title, to, icon, selected, setSelected }) => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
return (
<MenuItem
active={selected === title}
style={{
color: colors.grey[100],
}}
onClick={() => setSelected(title)}
icon={icon}
>
<Typography>{title}</Typography>
<Link to={to} />
</MenuItem>
);
};
const Sidebar = () => {
const theme = useTheme();
const colors = tokens(theme.palette.mode);
const [isCollapsed, setIsCollapsed] = useState(false);
const [selected, setSelected] = useState("Dashboard");
return (
<Box
sx={{
"& .pro-sidebar-inner": {
background: `${colors.primary[400]} !important`,
},
"& .pro-icon-wrapper": {
backgroundColor: "transparent !important",
},
"& .pro-inner-item": {
padding: "5px 35px 5px 20px !important",
},
"& .pro-inner-item:hover": {
color: "#868dfb !important",
},
"& .pro-menu-item.active": {
color: "#6870fa !important",
},
}}
>
<ProSidebar collapsed={isCollapsed}>
<Menu iconShape="square">
{/* LOGO AND MENU ICON */}
<MenuItem
onClick={() => setIsCollapsed(!isCollapsed)}
icon={isCollapsed ? <MenuOutlinedIcon /> : undefined}
style={{
margin: "10px 0 20px 0",
color: colors.grey[100],
}}
>
{!isCollapsed && (
<Box
display="flex"
justifyContent="space-between"
alignItems="center"
ml="15px"
>
<Typography variant="h3" color={colors.grey[100]}>
Project Romeo
</Typography>
<IconButton onClick={() => setIsCollapsed(!isCollapsed)}>
<MenuOutlinedIcon />
</IconButton>
</Box>
)}
</MenuItem>
{!isCollapsed && (
<Box mb="25px">
<Box display="flex" justifyContent="center" alignItems="center">
<img
alt="profile-user"
width="100px"
height="100px"
src={`../../assets/user.png`} // Database here for user profile picture or default picture?
style={{ cursor: "pointer", borderRadius: "50%" }}
/>
</Box>
<Box textAlign="center">
<Typography
variant="h2"
color={colors.grey[100]}
fontWeight="bold"
sx={{ m: "10px 0 0 0" }}
>
Vojtěch Král
</Typography>
<Typography variant="h5" color={colors.greenAccent[500]}>
Project Romeo Developer
</Typography>
</Box>
</Box>
)}
<Box paddingLeft={isCollapsed ? undefined : "10%"}>
<Item
title="Dashboard"
to="/"
icon={<HomeOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
Data
</Typography>
<Item
title="Manage Team"
to="/team"
icon={<PeopleOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Contacts Information"
to="/contacts"
icon={<ContactsOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Invoices Balances"
to="/invoices"
icon={<ReceiptOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
Pages
</Typography>
<Item
title="Profile Form"
to="/form"
icon={<PersonOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Calendar"
to="/calendar"
icon={<CalendarTodayOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="FAQ Page"
to="/faq"
icon={<HelpOutlineOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Typography
variant="h6"
color={colors.grey[300]}
sx={{ m: "15px 0 5px 20px" }}
>
Charts
</Typography>
<Item
title="Bar Chart"
to="/bar"
icon={<BarChartOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Pie Chart"
to="/pie"
icon={<PieChartOutlineOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Line Chart"
to="/line"
icon={<TimelineOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
<Item
title="Geography Chart"
to="/geography"
icon={<MapOutlinedIcon />}
selected={selected}
setSelected={setSelected}
/>
</Box>
</Menu>
</ProSidebar>
</Box>
);
};
export default Sidebar;

unable to set state in react for provided situation

i am building a ecommerce web app with react and i am unable to set state profileOptionsLayer when i click on the highlighted listitem both the logs are displayed on the console but component dosent rerender and state "profileOptionsLayer" is not updated either ,i am unable to locate the reason need help!
ALL imports .....
const TemporaryDrawer = ({
profileDrawerlayer,
setprofileDrawerlayer,
setuserDetails,
userDetails,
}) => {
const [profileOptionsLayer, setprofileOptionsLayer] = useState();
console.log(profileOptionsLayer);
return (
<>
<Drawer
anchor={"right"}
open={profileDrawerlayer}
onClose={() => {
setprofileDrawerlayer(false);
}}
>
<Box
sx={{ width: 250, background: "lightblue", height: "100%" }}
role="presentation"
onClick={() => {
setprofileDrawerlayer(false);
}}
onKeyDown={() => {
setprofileDrawerlayer(false);
}}
>
<List>
////////////////////////////////////// Below ///////////////////////////////////////////////
<ListItem disablePadding>
<ListItemButton
onClick={() => {
console.log("dsadsa");
setprofileOptionsLayer("View"); <= unable to set this state
console.log(profileOptionsLayer);
console.log("dsadsa");
}}
>
<ListItemIcon>
<VisibilityIcon />
</ListItemIcon>
<ListItemText primary={"View Profile"} />
</ListItemButton>
</ListItem>
/////////////////////////////////////// UP /////////////////////////////////////////
<ListItem
disablePadding
onClick={() => {
localStorage.removeItem("userId");
setuserDetails("");
}}
>
<ListItemButton>
<ListItemIcon>
<LogoutIcon />
</ListItemIcon>
<ListItemText primary={"Logout"} />
</ListItemButton>
</ListItem>
</List>
<Divider />
</Box>
</Drawer>
{profileOptionsLayer &&<ProfileOptions {...{ userDetails }} />}
</>
);
};
export default TemporaryDrawer;

React Update context causes Uncaught Error: Maximum update depth exceeded error

I'm actually building an SPA using React and Symfony and I'm facing an issue with the login part.
react-router-dom 5.2.0
history 4.10.1
I'm trying to redirect the user after successfully logged in to a private route /client but React gives me errors when I try to redirect with history or with the <Redirect />component.
Also, when I redirect to a public route there isn't any error.
I found out that the loop comes from setUser from the AuthContext.
// App.jsx
const App = () => {
const cart = getLocalStorage('cart', []);
const [currentUser, setCurrentUser] = useState(null);
const menu = '';
useEffect(() => {
setCurrentUser(authenticationService.currentUser)
}, [currentUser])
return <AuthProvider value={{ currentUser }}>
<MenuProvider value={{ menu }}>
<CartProvider value={{ cart }}>
<ToastProvider
autoDismiss
autoDismissTimeout={6000}
>
<Router history={history}>
< Navigation />
</Router>
</ToastProvider>
</CartProvider>
</MenuProvider>
</AuthProvider>
};
// Navigation.jsx
export const Navigation = () => {
const [currentUser, setCurrentUser] = useState(null);
const { user, setUser } = useContext(AuthContext)
useEffect(() => {
setCurrentUser(user)
}, [user])
const logout = () => {
authenticationService.logout();
setUser(null)
history.replace('/');
}
return <><div className="header">
<Container>
<Navbar expand="lg" sticky="top">
<Navbar.Toggle aria-controls="responsive-navbar-nav" />
<Navbar.Collapse id="responsive-navbar-nav">
<Nav className="mr-auto">
<NavLink className={"nav-link"} to={"/about"}> A propos </NavLink>
</Nav>
<Nav>
{currentUser && currentUser.username ?
<>
<Link className={"nav-link"} to={"/client"}> Menu </Link>
<NavDropdown title="Compte" id="collasible-nav-dropdown">
<NavDropdown.Item to={"/profile"} as={Link}>
Profile
</NavDropdown.Item>
<NavDropdown.Divider />
<NavDropdown.Item onClick={logout} to={"/logout"}> Déconnexion </NavDropdown.Item>
</NavDropdown>
</>
:
<NavLink className={"nav-link"} to={"/login"}> Connexion </NavLink>
}
</Nav>
</Navbar.Collapse>
</Navbar >
</Container>
</div>
<Switch>
<Route exact path="/" component={withRouter(Home)} />
<Route exact path="/home" component={Home} />
<Route exact path="/about" component={About} />
<Route exact path="/logout" />
<Route exact path="/login" component={LoginPage} />
<Route exact path="/register" component={RegisterPage} />
<Redirect from="/logout" to="/home" />
<PrivateRoute exact path="/client" component={Client} />
</Switch>
</>
}
// LoginPage.jsx
const LoginPage = () => {
const [values] = useState(initialValues);
const [isLoading, setIsLoading] = useState(false);
const [redirect, setRedirect] = useState(false);
const { user, setUser } = useContext(AuthContext);
const { register, handleSubmit, formState: { errors }, reset } = useForm({ mode: 'all' });
const { addToast } = useToasts();
const { from } = { from: { pathname: "/client" } };
const onSubmit = async data => {
setRedirect(true);
setIsLoading(true);
await authenticationService.login(data);
setUser(await authenticationService.currentUser.username);
addToast(`Welcome back ${data.username} !`, {
appearance: 'success',
autoDismiss: true,
})
setIsLoading(false);
history.push(from);
reset();
}
return user ?
<Redirect to="/client" />
: (<Container>
<div className="row">
<div className="col-lg-8 mx-auto">
<Card>
<Card.Header>
<Row style={{ justifyContent: 'center' }}>
<Card.Title
style={{ marginTop: 'auto', marginBottom: 'auto' }}>
— Connexion
</Card.Title>
</Row>
</Card.Header>
<Card.Body>
<Form noValidate onSubmit={handleSubmit(onSubmit)}>
<Form.Group>
<Form.Row>
<Col md="5" style={{ textAlign: 'end', marginTop: 'auto', marginBottom: 'auto' }}>
<Form.Label
required
className="bold">
Code utilisateur
</Form.Label>
<FontAwesomeIcon icon={faEdit} />
</Col>
<Col md="6">
<Form.Control
{...register("username",
{
required: true
})}
type="text"
id="username"
defaultValue={values.username}
placeholder="Saisissez votre code utilisateur" />
</Col>
</Form.Row>
</Form.Group>
<Form.Group>
<Form.Row>
<Col md="5" style={{ textAlign: 'end', marginTop: 'auto', marginBottom: 'auto' }}>
<Form.Label
required
className="bold">
Mot de passe
</Form.Label>
<FontAwesomeIcon icon={faLock} />
</Col>
<Col md="6">
<Form.Control
{...register("password",
{
required: true,
minLength: 6,
// pattern: /[A-Za-z]{3}/,
})}
type="password"
id="password"
placeholder="Saisissez votre mot de passe" />
</Col>
</Form.Row>
</Form.Group>
<Card.Footer className="text-center">
{
isLoading ? (
<Button type="submit" className="btn-sample" disabled={isLoading}>
<span className="fa-1x">
<i className="fas fa-circle-notch fa-spin"></i>
</span>
<span style={{ padding: '0.5em' }}>Connexion</span>
<FontAwesomeIcon icon={faUser} />
</Button>
) : (
<Button type="submit" className="btn-sample">
<span style={{ padding: '1em' }}>Connexion</span>
<FontAwesomeIcon icon={faUser} />
</Button>
)
}
</Card.Footer>
</Form>
</Card.Body>
</Card>
</div>
</div>
</Container>)
}
The errors:
Uncaught (in promise) Error: Maximum update depth exceeded. This can
happen when a component repeatedly calls setState inside
componentWillUpdate or componentDidUpdate. React limits the number of
nested updates to prevent infinite loops.
Uncaught Error: Maximum update depth exceeded. This can happen when a
component repeatedly calls setState inside componentWillUpdate or
componentDidUpdate. React limits the number of nested updates to
prevent infinite loops.
Warning: Can't perform a React state update on an unmounted component.
This is a no-op, but it indicates a memory leak in your application.
To fix, cancel all subscriptions and asynchronous tasks in a useEffect
cleanup function
Any idea ?
Thank you so much ^^

You don't have to pass currentUser to the dependencies array. You can pass either empty array or [authenticationService.currentUser]

How to open a collapse bar by onClick of an icon in another Component?

I have a component MockTable which shows a list of some items in a table along with actions such as view, delete and update. I need to open a collapse bar in another component AddMock by clicking any of these actions in MockTable. These actions are icons. I'm using semantic-ui react and react-Bootstrap.
actions in Mocktable =>
<Icon link name="eye" />
<Icon link name="edit" />
<Icon link name="delete" />
AddMock =>
const AddMock = () => {
return (
<div className="row">
<Accordion style={{ paddingLeft: "32px" }}>
<Card className="collapseStyle">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Add Mock
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Container className="mockbody">
<Header as="h3">Hierarchy</Header>
<TabContent />
</Container>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
};
How to implement this scenario?

In the component that possess the actions edit, view & delete, you can declare a state variable isActive and pass it through props to the component AddMock.
Assuming Mocktable.js looks something like following.
MockTable.js:
const MockTable = () => {
const [isActive, setIsActive] = useState(false);
return (
<Icon link name="eye" onClick={()=>setIsActive(!isActive)} /> // this will act as toggle (show & hide)
<Icon link name="edit" onClick={()=>setIsActive(!isActive)} />
<Icon link name="delete" onClick={()=>setIsActive(!isActive)} />
<AddMock isActive={isActive} />
)
}
AddMock.js
const AddMock = ({ isActive }) => {
return (
<div className="row">
<Accordion active={isActive} style={{ paddingLeft: "32px" }}> // passing isActive here to show/hide.
<Card className="collapseStyle">
<Card.Header>
<Accordion.Toggle as={Button} variant="link" eventKey="0">
Add Mock
</Accordion.Toggle>
</Card.Header>
<Accordion.Collapse eventKey="0">
<Card.Body>
<Container className="mockbody">
<Header as="h3">Hierarchy</Header>
<TabContent />
</Container>
</Card.Body>
</Accordion.Collapse>
</Card>
</Accordion>
</div>
);
};

Search bar producing a synthetic event

I have a search bar component that should take the value of the input, however I am using useState for my getters and setters and i am a bit confused as it is reported an error of
Below is my component, can you spot the erorr?
const SuppliersNavBar = (props) => {
const { classes } = props;
const [search, setSearch] = useState();
const updateSearch = (event) => {
setSearch({ search: event.target.value });
console.log(event);
};
return (
<Fragment><Fab className={classes.addCircle} style={{ float: 'right',
marginRight: 10, marginBottom: 10, backgroundColor: '#3B70BC', color:
'white' }} onClick={() => { this.props.history.push('/'); }}
id="addCircle" ><Add /></Fab>
<div className={classes.root}>
<AppBar position="static">
<Toolbar>
<Grid container direction="row"
justify="flex-start"
alignItems="center">
<Grid item xs={12} sm={6} md={3}>
<div className={classes.grow} />
<div className={classes.search} aria-label="search bar">
<div className={classes.searchIcon}>
<Search id="searchIcon" />
</div>
<InputBase
aria-label="search bar"
value={search}
onChange={updateSearch.bind(this)}
placeholder="Search"
classes={{
root: classes.inputRoot,
input: classes.inputInput,
}}
/>
</div>
</Grid>
</Grid>
</Toolbar>
</AppBar>
</div>
</Fragment>
);
};

Events in React are handled through object pooling meaning that events aren't readable through the console. You can call event.persist() and you will be able to see it. Please look at this page for further information. https://reactjs.org/docs/events.html