How to remove a class in a specific element in ReactJS and why is onClick working after two clicks?

Issue

So I have five nav tabs and when someone clicks for example on a shop tab, I want it font to be ‘bold’ so you can see what tab is currently active. I have Home active when someone enters the site but it’s hard coded. Meaning that when I click on a shop tab, ‘bold’ font on home tab still is there.
`

function Header() {
  const [tabState, setActiveTab] = useState ({
    activeObject: null,
    objects: [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}]
  });

  function activateTab(index) {
    setActiveTab({...tabState, activeObject: tabState.objects[index]})
  }

  function activateTabStyles(index) {
    if (tabState.objects[index] === tabState.activeObject) {
      return 'activeTab'
     } else {
        return ''
      }
    }
  return (
    <header className='siteHeader'>
      <div className='headerWrapper'>
        <div className='logoWrapper'>
          <Link to="/" className='link'>
            <img src={logo} alt='logo'></img>
          </Link>
        </div>
      <nav className='navBar'>
        <ul>
          <li 
            className='activeTab'
            onClick={() => {activateTab(1)}} 
            key={1}>
            <Link to="/" className='link'>Home</Link>
          </li>
          <li 
            className={activateTabStyles(2)} 
            onClick={() => {activateTab(2)}} 
            key={2}>
            <Link to="/Shop" className='link'>Shop</Link>
          </li>
          <li 
            className={activateTabStyles(3)} 
            onClick={() => {activateTab(3)}} 
            key={3}>
            <Link to="/Contact" className='link'>Contact</Link>
          </li>
          <li 
            className={activateTabStyles(4)} 
            onClick={() => {activateTab(4)}} 
            key={4}>
            <Link to="/TermsInfo" className='link'>Terms & Info</Link>
          </li>
          <li 
            className={activateTabStyles(5)} 
            onClick={() => {activateTab(5)}} 
            key={5}>
            <Link to="/Cart" className='link'>Cart</Link>
          </li>
        </ul>
      </nav>
      </div>  
    </header>
  )
}

export default Header

`

I hard coded a class ‘activeTab’ inside the home tab thinking that I could do something inside activateTab function to remove this class when I click on the other tabs. I wanted to try refs but I heard that I’m not supposed to use this. I tried creating another function with a style only for the home tab but I didn’t know how to call that function inside the activateTab so I deleted it.

Solution

function Header() {  
  const [currentActiveTab, setCurrentActiveTab] = 1 // this is default.

  return (
    <header className='siteHeader'>
      <div className='headerWrapper'>
        <div className='logoWrapper'>
          <Link to="/" className='link'>
            <img src={logo} alt='logo'></img>
          </Link>
        </div>
      <nav className='navBar'>
        <ul>
          <li 
            className={currentActiveTab == 1 ? "activeTab" : ""}
            onClick={() => setCurrentActiveTab(1)} 
            key={1}>
            <Link to="/" className='link'>Home</Link>
          </li>
          <li 
            className={currentActiveTab == 2 ? "activeTab" : ""}
            onClick={() => setCurrentActiveTab(2)} 
            key={2}>
            <Link to="/Shop" className='link'>Shop</Link>
          </li>
          <li 
            className={currentActiveTab == 3 ? "activeTab" : ""}
            onClick={() => setCurrentActiveTab(3)} 
            key={3}>
            <Link to="/Contact" className='link'>Contact</Link>
          </li>
          <li 
            className={currentActiveTab == 4 ? "activeTab" : ""}
            onClick={() => setCurrentActiveTab(4)} 
            key={4}>
            <Link to="/TermsInfo" className='link'>Terms & Info</Link>
          </li>
          <li 
            className={currentActiveTab == 5 ? "activeTab" : ""}
            onClick={() => setCurrentActiveTab(5)} 
            key={5}>
            <Link to="/Cart" className='link'>Cart</Link>
          </li>
        </ul>
      </nav>
      </div>  
    </header>
  )
}

export default Header

There are some things here you can do better, such as:

  • Use hyphens for class name, such as ‘active-tab’, ‘inactive-tab’, or don’t capitalize it like ‘navbar’.
  • It’s not a good idea to use objects in state. Try to keep it as simple as possible. If the data doesn’t change, just keep it in simple variable using let or const.
  • For the navbar list, try looping it using map. You can find an example here.

Answered By – Seneca Manu

This Answer collected from stackoverflow, is licensed under cc by-sa 2.5 , cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply

(*) Required, Your email will not be published