ReactJS - Rerender component - html

Question

I'm trying to create a menu in ReactJS that has a SideBar with icons and also a BurgerMenu in which I display titles that match the icons. When selecting a menu item, either from the SideBar or the BurgerMenu, it changes its color. If I select an item from the burger menu, everything works fine, but if I select it from the Sidebar, then in the burger menu, the previous item remains colored. It seems that the items in the burger menu are not rerendered and I can't find a solution to this.
Here is the code:
import React from 'react';
import styled from "styled-components";
import NavItem from "./NavItem";
import BurgerSideNav from "./burger-nav/BurgerSideNav";
/* This defines the actual bar going down the screen */
const StyledSideNav = styled.div`
position: fixed; /* Fixed Sidebar (stay in place on scroll and position relative to viewport) */
height: 100%;
width: 75px; /* Set the width of the sidebar */
z-index: 1; /* Stay on top of everything */
top: 3.4em; /* Stay at the top */
background-color: #222; /* Black */
overflow-x: hidden; /* Disable horizontal scroll */
padding-top: 10px;
`;
class SideNav extends React.Component {
constructor(props) {
super(props);
this.state = {
activePath: this.props.activePath,
items: [
{
path: '/', /* path is used as id to check which NavItem is active basically */
name: 'Home',
css: 'fa fa-fw fa-home',
key: 1 /* Key is required, else console throws error. Does this please you Mr. Browser?! */
},
{
path: '/news',
name: 'News',
css: 'fas fa-newspaper',
key: 2
},
{
path: '/info',
name: 'Info',
css: 'fas fa-info',
key: 3
},
{
path: '/profile',
name: 'Profile',
css: 'fas fa-id-card',
key: 4
},
{
path: '/coordinator',
name: 'Coordinator',
css: 'fas fa-user-tie',
key: 5
},
{
path: '/contact',
name: 'Contact',
css: 'fas fa-address-book',
key: 6
},
]
}
}
onItemClick = (path) => {
this.setState({activePath: path}); /* Sets activePath which causes rerender which causes CSS to change */
};
render() {
const { items, activePath } = this.state;
return (
<div>
<StyledSideNav>
<BurgerSideNav
activePath = {activePath}
onItemClick={this.onItemClick}
/>
{
/* items = just array AND map() loops thru that array AND item is param of that loop */
items.map((item) => {
/* Return however many NavItems in array to be rendered */
return (
<NavItem
path={item.path}
name={item.name}
css={item.css}
onItemClick={this.onItemClick} /* Simply passed an entire function to onClick prop */
active={item.path === activePath}
key={item.key}
/>
)
})
}
</StyledSideNav>
</div>
);
}
}
export default SideNav
import React from "react"
import "../sideNav.css"
import BurgerNavItem from "./BurgerNavItem";
class BurgerSideNav extends React.Component {
constructor(props) {
super(props);
this.state = {
showNav: false,
activePath: this.props.activePath,
items: [
{
path: '/',
name: 'Acasa',
css: 'fa fa-fw fa-home',
key: 1
},
{
path: '/news',
name: 'Noutati',
css: 'fas fa-newspaper',
key: 2
},
{
path: '/info',
name: 'Despre lucrare',
css: 'fas fa-info',
key: 3
},
{
path: '/profile',
name: 'Profil student',
css: 'fas fa-id-card',
key: 4
},
{
path: '/coordinator',
name: 'Coordonator',
css: 'fas fa-user-tie',
key: 5
},
{
path: '/contact',
name: 'Contact',
css: 'fas fa-address-book',
key: 6
},
]
};
}
openNavClick = e => {
e.preventDefault();
this.openNav()
};
closeNavClick = e => {
e.preventDefault();
this.closeNav()
};
openNav = () => {
this.setState({
showNav: true
});
document.addEventListener("keydown", this.handleEscKey)
};
closeNav = () => {
this.setState({
showNav: false
});
document.removeEventListener("keydown", this.handleEscKey)
};
handleEscKey = e => {
if (e.key === "Escape") {
this.closeNav()
}
};
onItemClick = (path) => {
const {onItemClick} = this.props;
this.setState({ activePath: path });
onItemClick(path);
};
render() {
const { items, activePath, showNav } = this.state;
let navCoverStyle = { width: showNav ? "100%" : "0" }
let sideNavStyle = { width: showNav ? "250px" : "0" }
return (
<React.Fragment>
<span onClick={this.openNavClick}>
<i className="fas fa-bars open-nav"/>
</span>
<div
onClick={this.navCoverClick}
class="nav-cover"
style={navCoverStyle}
/>
<div name="side-nav" class="side-nav" style={sideNavStyle}>
<a href="#" onClick={this.closeNavClick} class="close-nav">
×
</a>
{
items.map((item) => {
return (
<BurgerNavItem
path={item.path}
name={item.name}
css={item.css}
onItemClick={this.onItemClick}
active={item.path === activePath}
key={item.key}/>
)
})
}
</div>
})
</React.Fragment>
)
}
}
export default BurgerSideNav

Answer 1

If I understand the question correctly, if you want to re-render, you can pass the activePath as part of the key to easily force a re-render:
return (
<NavItem
path={item.path}
name={item.name}
css={item.css}
onItemClick={this.onItemClick}
active={item.path === activePath}
key={`${item.key}-${activePath}`}
/>
);
One thing to note is that you probably only need activePath defined in the Parent Component (SideNav), not in both if you don't want both to be styled, hence why both stay 'enabled'.
Also, your items won't change, so they should be constant somewhere else, instead of being part of your state. Maybe in a constants file:
// PathContants.js
export default PathConstants = [
{
id: 1,
path: '/home',
},
..
];
If the paths are always unique, you can just use the path itself, as a key key={item.path}, since the key is actually a string. No need to store the key itself.

Answer 2

in BurgerSideNav component you have set the state in the constructor function saying
activePath: this.props.activePath
but when the state changes in the StyledSideNav component you are not setting the state again, to set the state again, implement componentWillReceiveProps
eg:
componentWillReceiveProps(nextProps) {
if (this.props.activePath !== nextProps.activePath) {
this.setState({
activePath: nextProps.activePath
})
}
}