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