Estoy renderizando un componente <MenuITem />
más de una vez, usando .map()
dentro de otro componete. El componente MenuItem
tiene un estado que al hacer clic cambia los estilos.
Lo que quiero lograr es que los estilos de los demás componentes se reinicien al estado inicial, cuando hago clic en uno de ellos pata cambiar sus estilos.
Esto es lo que tengo. Es el menú de Twitter:
Esto pasa al hacer clic en un componente:
Pero, pasa esto al hacer clic en otro:
Lo que debería pasar es que se reinicie el estado del componente Inicio. No he podido lograrlo, no sé cómo.
En el componente Menu
renderizo MemuItem
así:
<div className="menu">
{
ITEMS.map((item, i) => {
return (
<MenuItem
text={item.text}
key={item.text}
item={item}
reRender={ reRender }
value={value}
/>
)
})
}
</div>
Este es mi componente MenuItem
:
function MenuItem({text, item, reRender, value}) {
const [isItemActive, setIsItemActive] = useState(false)
const itemClassName = `${isItemActive ? 'menu-item--active' : 'menu-item--children'}`
const toActiveItem = () => {
reRender()
setIsItemActive(!isItemActive)
}
return (
<a href='#' className='menu-item' onClick={ toActiveItem }>
<div className={ itemClassName }>
<span className='menu-item--icon'>
{
isItemActive
? item.on
: item.off
}
<PointNews />
</span>
<p className='menu-item--text'>{text}</p>
</div>
</a>
)
}
No probé muchas cosas, la verdad no sé cómo hacer.
reRender
?