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

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. Here's a github for this page: https://pattah.github.io/WRLDWD/

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.

CodePudding user response：

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.

CodePudding user response：

if you work with react, you have to use it's own rules. it is a massive framework.

please read it's official documents and don't find or use any alternative ways for it.