I'm using react-sidebar-pro for my sidebar component in my react app and I want my sidebar menu items' active state to turn true when the user has clicked and is redirected to a link. So far what I've done is set a parameter if the user is in a specific address it will turn true but it only updates when I refresh the page. How do I update it without having to refresh the page so it would look responsive? I thought of using useState to resolve this but I have no idea on how to apply it to the code because I'm still learning React

Here's my Sidebar.js

function Sidebar() {
        //create initial menuCollapse state using useState hook
        const [menuCollapse, setMenuCollapse] = useState(false)

        //create a custom function that will change menucollapse state from false to true and true to false
      const menuIconClick = () => {
        //condition checking to change state from true to false and vice versa
        menuCollapse ? setMenuCollapse(false) : setMenuCollapse(true);
      }
    return (
        <>
        <div id="header">
            {/* collapsed props to change menu size using menucollapse state */}
          <ProSidebar collapsed={menuCollapse}>
            <SidebarHeader>
            <div className="logotext">
                {/* small and big change using menucollapse state */}
                <p>{menuCollapse ? "LOGO" : "LONG LOGO"}</p>
              </div>
              <div className="closemenu" onClick={menuIconClick}>
                  {/* changing menu collapse icon on click */}
                {menuCollapse ? (
                  <FiArrowRightCircle/>
                ) : (
                  <FiArrowLeftCircle/>
                )}
              </div>
            </SidebarHeader>
            <SidebarContent>
              <Menu iconShape="square">
                <MenuItem active={window.location.pathname === "/"} icon={<FiHome />} >
                  Home
                <Link to="/"/>
                </MenuItem>
                <MenuItem  active={window.location.pathname === "/FAQ"}  icon={<FaList />}>
                  FAQ 
                <Link to="/FAQ"/>
                </MenuItem>
                <MenuItem  active={window.location.pathname === "/Search-sec"} icon={<RiPencilLine />}>SEARCH SEC<Link to="/Search-sec"/></MenuItem>
            </SidebarContent>
            <SidebarFooter>
              <Menu iconShape="square">
                <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
              </Menu>
            </SidebarFooter>
          </ProSidebar>
        </div>
      </>
    )
}

export default Sidebar

CodePudding user response：

Basically two options here:

1. make window.location.path as your local state please refer to Why useEffect doesn't run on window.location.pathname changes?
2. add another state (changed based on click), to force component re-render

function Sidebar() {

  const [menuCollapse, setMenuCollapse] = useState(false);
  const [activeIndex, setActiveIndex] = useState(() => { 
    const initialIndex = 
      window.location.pathname === '/' ? 0 
      : window.location.pathname === '/FAQ' ? 1 
        : window.location. pathname === 'Search-sec' ? 2 
          : 0; 
    return initialIndex; 
  });

  const menuIconClick = () => {
    setMenuCollapse(!menuCollapse);
  };

  return (
    <>
      <div id="header">
        {/* collapsed props to change menu size using menucollapse state */}
        <ProSidebar collapsed={menuCollapse}>
          <SidebarHeader>
            <div className="logotext">
              {/* small and big change using menucollapse state */}
              <p>{menuCollapse ? "LOGO" : "LONG LOGO"}</p>
            </div>
            <div className="closemenu" onClick={menuIconClick}>
              {/* changing menu collapse icon on click */}
              {menuCollapse ? (
                <FiArrowRightCircle />
              ) : (
                <FiArrowLeftCircle />
              )}
            </div>
          </SidebarHeader>
          <SidebarContent>
            <Menu iconShape="square">
              <MenuItem active={activeIndex === 0} icon={<FiHome />} >
                Home
                <Link id="MenuItemHome" to="/" onClick={() => setActiveIndex(0)} />
              </MenuItem>
              <MenuItem  active={activeIndex === 1}  icon={<FaList />} >
                FAQ
                <Link id="MenuItemFAQ" to="/FAQ" onClick={() => setActiveIndex(1)} / >
              </MenuItem>
              <MenuItem  active={activeIndex === 2} icon={<RiPencilLine />}>
                SEARCH SEC
                <Link id="MenuItemSearch" to="/Search-sec" onClick={() => setActiveIndex(2)} />
              </MenuItem>
            </Menu>
          </SidebarContent>
          <SidebarFooter>
            <Menu iconShape="square">
              <MenuItem icon={<FiLogOut />}>Logout</MenuItem>
            </Menu>
          </SidebarFooter>
        </ProSidebar>
      </div>
    </>
  );
}

export default Sidebar;

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>