0

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:

introducir la descripción de la imagen aquí

Esto pasa al hacer clic en un componente:

introducir la descripción de la imagen aquí

Pero, pasa esto al hacer clic en otro:

introducir la descripción de la imagen aquí

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.

2
  • ¿Que se supone que hace ese reRender?
    – g.4
    Commented el 30 may. 2023 a las 5:18
  • Entonces lo que debes hacer es "elevar" o "subir" el estado de esos componentes a un ancestro comun. Si solo puede haber uno activo, el que debe saber quien es el activo seria el menu (o algun ancestro) no internamente dentro de cada item del menu. Pero a cada item del menu si le debes pasar una nueva prop basada en ese estado de si debe pintarse como activo o no.
    – Pipe
    Commented el 1 jun. 2023 a las 3:50

1 respuesta 1

0

¿Por qué no me funciona?

El problema por el que siempre se mantiene activo tu MenuItem es porque estás controlando si está activo o no en ese mismo componente.

¿Cómo lo puedo solucionar?

Para poder gestionar el problema que estás teniendo debes escalar a un nivel por encima el estado que controla cual de los MenuItem debe estar activo.

Por ejemplo

import { useState } from 'react';

const ITEMS = [{ text: 'Inicio' }, { text: 'Explorar' }];

const MenuItem = ({ text, onClick, isActive }) => {
  return (
    <button
      onClick={onClick}
      className={isActive ? 'menu-item--active' : 'menu-item'}
    >
      {text}
    </button>
  );
};

const Menu = ({ items }) => {
  const [activeMenuItem, setActiveMenuItem] = useState();
  return (
    <div>
      {items.map((item) => (
        <MenuItem
          text={item.text}
          key={item.text}
          onClick={() => {
            setActiveMenuItem(item.text);
          }}
          isActive={item.text === activeMenuItem}
        />
      ))}
    </div>
  );
};

function App() {
  return (
    <div>
      <Menu items={ITEMS} />
    </div>
  );
}

export default App;

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.