Tengo algunos íconos de react-icons que quiero cambiar de contorno a relleno cada vez que hago clic en él, pero en lugar de cambiarse a sí mismo, cambia todos los íconos de contorno a relleno.
Aquí está mi código
function Header() { const [isActive, setIsActive] = useState(false); return ( .... <div className="flex items-center space-x-6"> <div className="cursor-pointer select-none"> {isActive? <AiOutlineHome onClick={()=>{ setIsActive(!isActive)}}/>: <AiFillHome onClick={()=>{ setIsActive(!isActive)}} /> } </div> <div className="cursor-pointer select-none"> {isActive?<MdOutlineAddBox onClick={()=>{ setIsActive(!isActive)}}/>: <MdAddBox onClick={()=>{ setIsActive(!isActive)}} />} </div> .... )} Sé que es porque comparten el mismo estado isActive , pero no sé exactamente cómo solucionarlo. ¿Puede alguien por favor ayudarme con esto?
Editar:
function HeaderIcon({ Icon, ActiveIcon }) { const [isActive, setIsActive] = useState(false); return ( <div>{isActive ? <Icon /> : <ActiveIcon />}</div> ); } export default HeaderIcon; Puse este componente en un archivo nuevo, pero ¿cómo puedo pasarle onClick ?
Necesitas usar dos estados diferentes
function Header() { const [isActive, setIsActive] = useState(false); const [isActive2, setIsActive2] = useState(false); return ( .... <div className="flex items-center space-x-6"> <div className="cursor-pointer select-none"> {isActive? <AiOutlineHome onClick={()=>{ setIsActive(!isActive)}}/>: <AiFillHome onClick={()=>{ setIsActive(!isActive)}} /> } </div> <div className="cursor-pointer select-none"> {isActive2?<MdOutlineAddBox onClick={()=>{ setIsActive2(!isActive2)}}/>: <MdAddBox onClick={()=>{ setIsActive2(!isActive2)}} />} </div> .... )}Espero que esto haga magia
La respuesta para esto es:
import React, { useState } from "react"; function HeaderIcon({ inactiveIcon, activeIcon }) { const [isActive, setIsActive] = useState(false); return ( <div onClick={() => setIsActive(!isActive)}> {isActive ? activeIcon : inactiveIcon} </div> ); } export default HeaderIcon;Luego pasa el icono que quieras.