React - toggleClass on button activate all buttons

user_10310738 0
Viewed 113

I'm trying to make navigation menu similiar to the nav menu in reactjs.org I'm using Header component and navigation which is objects with links and name. I'm adding class onClick using the state but this toggle all buttons.

import React, { useState } from "react";
import styles from "./index.module.css";
import getNavigation from "../../utils/navigation";
import { Link } from "react-router-dom";
import logo from "../../images/europa-logo.png";

const Header = () => {
  const links = getNavigation();
  const [isActive, setActive] = useState(false);

  const toggleClass = () => {
    setActive(!isActive);
  };

  return (
<div>
  <nav className={styles.topnav}>
    <div className={styles.pageWrapper}>
      <img src={logo} alt="Logo" />

      <ul>
        {links.map((l, i) => (
          <li key={i}>
            <Link
              className={isActive ? "btn-active" : null}
              onClick={toggleClass}
              to={l.link}
              value={l.title}
            >
              {l.title}
            </Link>
          </li>
        ))}

        <li>
          {" "}
          <div className={styles.social}>
            <a href="https://facebook.com">
              <FontAwesomeIcon
                size="2x"
                icon={["fab", "facebook-square"]}
              />{" "}
            </a>

            <a href="mailto:someone@mail.com">
              <FontAwesomeIcon size="2x" icon="envelope" />
            </a>
          </div>
        </li>
      </ul>
    </div>
  </nav>
</div>
  );
};

export default Header;

The result is all buttons are activated: Nav-menu

My goal is to activate only the link which is clicked and the first button in nav menu need to be activated by default. What I'm doing wrong?

react-hooks reactjs state
2 Answers
user_168704820

You can define active index and your condition look like this

className={activeIndex === i ? "btn-active" : ""}

Toggle class function:

const [activeIndex, setActiveIndex] = useState(0);

  const toggleClass = (i) => {
    setActiveIndex(i);
  };

and onClick will look like this

onClick={()=>{toggleClass(i);}}
user_99447860
Related