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
Basically two options here:
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;