Probé el UseState(false) pero agregó los estilos a todos los demás elementos de la barra de navegación
import React, {useState } from 'react'; import { AiOutlineMenu } from 'react-icons/ai'; import { Navbar, NavContainer, NavLogo, NavLogoLink, NavMobileIcon, NavLists, NavList, NavLink, NavBtn, NavBtnLink } from './NavStyle'; export default function Nav({openHandler}) { const [isActive, setIsActive] = useState(false); const clickHandler = () => { setIsActive(!isActive); } return ( <Navbar> <NavContainer> <NavLogo><NavLogoLink to="/about">Jonathan</NavLogoLink></NavLogo> <NavMobileIcon onClick={openHandler}> <AiOutlineMenu /> </NavMobileIcon> <NavLists> <NavList onClick={clickHandler} className={isActive ? 'active' : ''}> <NavLink to="#about">About</NavLink> </NavList> <NavList onCLick={clickHandler} className={isActive && 'active'}> <NavLink to="#discover">Discover</NavLink> </NavList> <NavList onClick={clickHandler} className={isActive && 'active'}> <NavLink to="#services">Services</NavLink> </NavList> </NavLists> <NavBtn><NavBtnLink to="signup">Sign Up</NavBtnLink></NavBtn> </NavContainer> </Navbar> ) }En lugar de un booleano en useState, debe almacenar un identificador único para el NavLink que está activado.
import React, {useState } from 'react'; import { AiOutlineMenu } from 'react-icons/ai'; import { Navbar, NavContainer, NavLogo, NavLogoLink, NavMobileIcon, NavLists, NavList, NavLink, NavBtn, NavBtnLink } from './NavStyle'; export default function Nav({openHandler}) { const [isActive, setIsActive] = useState(''); const clickHandler = (e) => { setIsActive((isActive) => isActive = e.currentTarget.id); } return ( <Navbar> <NavContainer> <NavLogo><NavLogoLink to="/about">Jonathan</NavLogoLink></NavLogo> <NavMobileIcon onClick={openHandler}> <AiOutlineMenu /> </NavMobileIcon> <NavLists> <NavList onClick={clickHandler} id="about" className={isActive === 'about' && 'active'}> <NavLink to="#about">About</NavLink> </NavList> <NavList onCLick={clickHandler} id="discover" className={isActive === 'discover' && 'active'}> <NavLink to="#discover">Discover</NavLink> </NavList> <NavList onClick={clickHandler} id="services" className={isActive === 'services' && 'active'}> <NavLink to="#services">Services</NavLink> </NavList> </NavLists> <NavBtn><NavBtnLink to="signup">Sign Up</NavBtnLink></NavBtn> </NavContainer> </Navbar> ) }Descargo de responsabilidad: es posible que este código no se ejecute correctamente, porque no lo ejecuté en primer lugar. Es simplemente una pista para guiarlo en la dirección correcta.
Otro enfoque sería un casco useRef para almacenar un identificador de NavList en el que se ha hecho clic y acceder a ese identificador dentro de clickHandler
Tiene el mismo controlador de clics para todos los componentes de NavList. Entonces, cuando haga clic en cualquiera de ellos, el controlador alternará isActive prop. Como todas las condiciones className usan el mismo accesorio isActive, cambiará la clase de todas ellas. Tienes que averiguar en cuál se hizo clic y está activo.
import React, {useState } from 'react'; import { AiOutlineMenu } from 'react-icons/ai'; import { Navbar, NavContainer, NavLogo, NavLogoLink, NavMobileIcon, NavLists, NavList, NavLink, NavBtn, NavBtnLink } from './NavStyle'; export default function Nav({openHandler}) { const [active, setActive] = useState('about'); // about is default value const clickHandler = (name) => () => { setActive(name); } return ( <Navbar> <NavContainer> <NavLogo><NavLogoLink to="/about">Jonathan</NavLogoLink></NavLogo> <NavMobileIcon onClick={openHandler}> <AiOutlineMenu /> </NavMobileIcon> <NavLists> <NavList onClick={clickHandler('about')} className={active === 'about' ? 'active' : ''}> <NavLink to="#about">About</NavLink> </NavList> <NavList onCLick={clickHandler('discover')} className={active === 'discover' && 'active'}> <NavLink to="#discover">Discover</NavLink> </NavList> <NavList onClick={clickHandler('services')} className={active === 'services' && 'active'}> <NavLink to="#services">Services</NavLink> </NavList> </NavLists> <NavBtn><NavBtnLink to="signup">Sign Up</NavBtnLink></NavBtn> </NavContainer> </Navbar> ) }