ReactJS - Rerender component

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">
                        &times;
                    </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

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
     })
  }
}