Hola chicos espero me puedan ayudar.
Estoy haciendo un sidebar la cual tiene 6 elementos; pero a futuro podría tener mas conforme avance el proyecto. La idea que pretendo es que cuando haga click en algún elemento este ponga su background de color verde y cuando cambie a otro elemento, el anterior se desactive y/o desaparezca(esa parte esta) y ahora se pinte en el nuevo elemento seleccionado.
Estoy comenzando con react y de verdad que he tratado de hacerlo y no me da, espero que con su ayuda pueda esclarecer dudas y resolverlo.
Pueden ver el ejercicio aquí: https://codesandbox.io/s/focus-side-bar-s55x6
Describo mi código aquí
import React from "react";
let getActive = () => {
let li = document.querySelectorAll("li");
let arrayLi = Array.from(li);
let activo = arrayLi.find(cv => cv.classList.contains("active"));
if (activo) {
activo.classList.remove("active");
}
console.log(arrayLi);
};
const SideBar = () => {
return (
<section id="side-bar" className="">
<nav className="nav-menu" onClick={() => getActive()}>
<ul id="ul" className="text-base uppercase">
<li
id={1}
className="hover:text-white py-2 border-b bg-green-500 active"
>
<a href="#home" className="pl-10">
<span className="">
<i className="fas fa-home" />
</span>
<span className="ml-4">Home</span>
</a>
</li>
<li
id={2}
className="hover:text-white hover:bg-blue-600 py-2 border-b li"
>
<a href="#about" className="pl-10">
<span className="">
<i className="fas fa-user" />
</span>
<span className="ml-4">About Me</span>
</a>
</li>
<li
id={3}
className="hover:text-white hover:bg-blue-600 py-2 border-b li"
>
<a href="#resume" className="pl-10">
<span className="">
<i className="fas fa-file" />
</span>
<span className="ml-4">Resume</span>
</a>
</li>
<li
id={4}
className="hover:text-white hover:bg-blue-600 py-2 border-b li"
>
<a href="#portfolio" className="pl-10">
<span className="">
<i className="fas fa-briefcase" />
</span>
<span className="ml-4">Portfolio</span>
</a>
</li>
<li
id={5}
className="hover:text-white hover:bg-blue-600 py-2 border-b li"
>
<a href="#blog" className="pl-10">
<span className="">
<i className="fas fa-book" />
</span>
<span className="ml-4">Blog</span>
</a>
</li>
<li
id={6}
className="hover:text-white hover:bg-blue-600 py-2 border-b li"
>
<a href="#contact" className="pl-10">
<span className="">
<i className="fas fa-phone-square" />
</span>
<span className="ml-4">Contact</span>
</a>
</li>
</ul>
</nav>
</section>
);
};
export default SideBar;