React js Active Menu Item with useState

I've been trying to add a menu with an active styling by using useState in React js but for some reasons it only stays in active state, does not go back to inactive when you click on the other menu item. On the other hand, it works perfectly when I pass down my active state as props from Sidebar.js

React version: "react": "^17.0.2" Node version: v16.0.0

Here is my code:

SideLink.js

import React, {useState} from "react";    const SideLink = ({ name, Icon}) => {    const [active, setactive] = useState("Home")      return (      <li className="group" onClick={() => setactive(name)}>        <a href={name.toLowerCase()} className="cursor-pointer block mb-2 pointer-events-none">          <div className="inline-block">            <div              className={`              flex items-center               group-hover:bg-blue-50               group-hover:text-red-500               rounded-full pl-2 py-3 pr-6              ${active === name ? "text-red-400" : ""}              `}              >              <Icon />              <span className="ml-2 font-bold text-xl">{name}</span>            </div>          </div>        </a>      </li>    );  };    export default SideLink;  

Sidebar.js

import React, {useState} from "react";  import SideLink from "../../assets/components/SideLink";  import {    BookmarksIcon,    ExploreIcon,    HomeIcon,    ListsIcon,    MessagesIcon,    MoreIcon,    NotificationsIcon,    ProfileIcon,  } from "../../assets/icons/Icon";      const sideLinks = [    {      name: "Home",      icon: HomeIcon,    },    {      name: "Explore",      icon: ExploreIcon,    },    {      name: "Notifications",      icon: NotificationsIcon,    },    {      name: "Messages",      icon: MessagesIcon,    },    {      name: "Bookmarks",      icon: BookmarksIcon,    },    {      name: "Lists",      icon: ListsIcon,    },    {      name: "Profile",      icon: ProfileIcon,    },    {      name: "More",      icon: MoreIcon,    },  ];    const Sidebar = () => {      return (      <div className="w-72 flex flex-col justify-between px-2">        <div>          <nav>            <ul>              {sideLinks.map(({ name, icon }) => (                <SideLink key={name} name={name} Icon={icon}/>              ))}            </ul>          </nav>        </div>        <div>bottom</div>      </div>    );  };    export default Sidebar;  

Thank you!

https://stackoverflow.com/questions/67428340/react-js-active-menu-item-with-usestate May 07, 2021 at 10:41AM