How set state for one individual component React when having multiple components

user_14265872 0
Viewed 19

I have this Navbar with 3 tabs, and I managed to build a hook that sets a different style when clicked (changing its class); however, i don't know how target a state directly to just one tab. When clicked, all of then change their states. how I use the "this" in react in a case like this


   const [isActive, setIsActive] = useState(false);

   const handleClick = () => {
    setIsActive(current => !current);
   };

   const setName = () => {
    return (isActive ? 'true' : 'false');
   }

  return (
    <NavStyled>
      <div className="navbar-div">
        <nav className="nav">
          <p className={setName()} onClick={handleClick} >Basic</p>
          <p className={setName()} onClick={handleClick}  >Social</p>
          <p className={setName()} onClick={handleClick} >Certificates</p>
        </nav>
      </div>
    </NavStyled>
  );
};

export default Navbar;  ```
reactjs components
1 Answers

Navbar is a function component, not a hook.
You need to store either the currentTabIndex or currentTabName in the state.

var [currentTabName, setCurrentTabName] = useState('Basic');

handleClick=(evt)=> {
    setCurrentName(evt.target.textContent);
};


['Basic','Social','Certificates'].map((tabName, i)=> {
    let clazz = (tabName == currentTabName)?'active':'';
    return <p key={tabName} className={clazz} onClick={handleClick} >{tabName}</p>
});
user_9940060
Related