Estoy dejando un espacio en blanco sobre cómo alternar una clase activa en los enlaces de un encabezado. Actualmente tengo la clase aplicada, pero alterna la clase para todos los enlaces con la función. Necesito poder alternar la clase current solo el enlace seleccionado:
const [isActive, setActive] = useState(false); const toggleClass = () => { setActive(!isActive); }; <li> <a className={isActive ? "current" : null} href="#home" onClick={toggleClass}> Home </a> </li> <li> <a className={isActive ? "current" : null} href="#about" onClick={toggleClass}> About </a> </li> <li> <a className={isActive ? "current" : null} href="#contact" onClick={toggleClass}> Contact </a> </li>Está utilizando el mismo estado para todos sus enlaces. Esto no funcionaría, en menos lo cambias un poco. Por ejemplo, puede establecer isActive en el hash del enlace en el que se hizo clic. Al igual que:
const [isActive, setActive] = useState(""); const toggleClass = (e) => { setActive(e.currentTarget.hash); }; <li> <a className={isActive == "#home" ? "current" : ""} href="#home" onClick={toggleClass}> Home </a> </li> <li> <a className={isActive == "#about" ? "current" : ""} href="#about" onClick={toggleClass}> About </a> </li> <li> <a className={isActive == "#contact" ? "current" : ""} href="#contact" onClick={toggleClass} > Contact </a> </li>