So I have a problem with this one. I need this class "active" to be added only to single li element onClick. I understand I need to get id of the exact li element that is clicked but I not sure on how to do that. Also I would like the first li element (Home) to be active on the begining once the page launches. Here is the code I have for now:

import React, { useState, useEffect } from "react";

function NavBar() {
  const [isActive, setActive] = useState("false");

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

  return (
    <section id="main">
      <div className="navigation">
        <ul>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="home-outline"></ion-icon>
              </span>
              <span className="text">Home</span>
            </a>
          </li>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="person-outline"></ion-icon>
              </span>
              <span className="text">Profile</span>
            </a>
          </li>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="chatbubble-outline"></ion-icon>
              </span>
              <span className="text">Mesaages</span>
            </a>
          </li>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="camera-outline"></ion-icon>
              </span>
              <span className="text">Photos</span>
            </a>
          </li>
          <li
            onClick={handleToggle}
            className={`list${isActive ? " active" : ""}`}
          >
            <a href="#">
              <span className="icon">
                <ion-icon name="settings-outline"></ion-icon>
              </span>
              <span className="text">Settings</span>
            </a>
          </li>
          <div className="indicator"></div>
        </ul>
      </div>
    </section>
  );
}
export default NavBar;

Thank you in advance.

CodePudding user response：

In this way you gonna see that each time you click an element, i show in right side: "IM ACTIVE"

import React, { useState, useEffect } from "react";

const ListItem = ({ isActive, onClick, icon, name }) => {
  // const className = `list${isActive ? " active" : ""}`;
  // console.log(`${name} = ${className}`)
  // will console.log:
  // Unactive -> EXAMPLE: Home = list
  // Active -> EXAMPLE: Home = list active

  return (
    <li
      onClick={onClick}
      //  className={className}
    >
      <a href="#">
        <span className="icon">
          <ion-icon name={icon} />
        </span>
        <span className="text">{name} {isActive ? 'IM ACTIVE': ''}</span>
      </a>
    </li>
  );
};

function NavBar() {
  const [activeElem, setActive] = useState("Home");

  const handleToggle = (newValue) => {
    setActive(newValue);
  };

  console.log("active>>", activeElem);

  return (
    <section id="main">
      <div className="navigation">
        <ul>
            <ListItem
              key="Home"
              isActive={activeElem === "Home"}
              onClick={() => handleToggle("Home")}
              icon="home-outline"
              name="Home"
            />
            <ListItem
              key="Profile"
              isActive={activeElem === "Profile"}
              onClick={() => handleToggle("Profile")}
              icon="person-outline"
              name="Profile"
            />
            <ListItem
              key="Messages"
              isActive={activeElem === "Messages"}
              onClick={() => handleToggle("Messages")}
              icon="chatbubble-outline"
              name="Messages"
            />
            <ListItem
              key="Photos"
              isActive={activeElem === "Photos"}
              onClick={() => handleToggle("Photos")}
              icon="camera-outline"
              name="Photos"
            />
            <ListItem
              key="Settings"
              isActive={activeElem === "Settings"}
              onClick={() => handleToggle("Settings")}
              icon="settings-outline"
              name="Settings"
            />
          <div className="indicator"></div>
        </ul>
      </div>
    </section>
  );
}

Then, you can do whatever you want with that isActive prop