Как убирать класс у другого экземпляра компонента по клику?

Question

[Senbonzakuraa]

Есть вот такой компонент:

export const ButtonRoom = (props) => {
        const [activeRoom, setActiveRoom] = useState(false)
        const setRoom = () => {
            setActiveRoom(!activeRoom)
        }
        return(
            <button onClick={()=>setRoom()} className={activeRoom ? "room__active button" : "button"}>
            </button>
        )
    }

На данный момент я могу присвоить/убрать класс по клику только у элемента на котором производится клик, а как убрать класс у другого экземпляра компонента?

Comments

[Владимир Коротенко]

Что то типа eventbus

Answer 1

[Владимир Коротенко]

Выше прокомментировал но по идее компонент с горы вообще не должен этого делать. Либо он отсылает сообщение родителю а уж он рулит либо общий стайт для приложения либо шина событий

Answer 2

[tdtdtd]

Если компонент, класс которого должен меняться находиться гораздо выше, чем компонент, который должен инициализировать изменение класса, то тут либо прокидывать по цепочке пропсы, либо использовать контекст, либо прикручивать какие-то хранилища аля redux.
Но React.createContext вероятно то, что вам нужно.