Estoy creando un clon de youtube usando react js y usé este ícono
import HomeIconfilled from '@mui/icons-material/Home'; import HomeIcon from '@mui/icons-material/HomeOutlined';Eso se parece a este HomeIconfilled
que se representa llamando a esta función
<Sidebariconfunc Icon={HomeIconfilled} Title="Home"/>Eso toma 2 parámetros y vuelve a poner el ícono
function Sidebariconfunc({Icon,Title}) { return ( <div className='SidebarRow'> <div className='Sidebar_Icon'> <Icon/> </div> <div className='Slidebar_Title'> {Title} </div> </div> ) }¿Cómo puedo cambiar el nombre de los accesorios a HomeIcon cuando hago clic en el icono para que cambie a este icono ? HomeIcon ¡Gracias!
function SidebarIcon({ActiveIcon, InactiveIcon, title, isActive}) { return ( <div className='SidebarRow'> <div className='Sidebar_Icon'> {isActive ? <ActiveIcon/> : <InactiveIcon /> </div> <div className='Slidebar_Title'>{Title}</div> </div> ) }Uso:
const [isActive, setIsActive] = React.useState(false) return ( <a onClick={() => setIsActive(!isActive)> <SidebarIcon ActiveIcon={HomeIconfilled} InactiveIcon={HomeIcon} title='Home' isActive={isActive} /> </a> )