Search code examples
javascriptreactjstoggletransitionflux

Reactjs: Toggling the class of a different component


Tools: Reactjs and vanilla flux.

I'm making an off-canvas slider in React. The button and the sliding menu that it controls live within separate components. This makes state changing within the component(like many examples I've seen) not possible.

Does this mean that I need to handle the toggle data for the sliding component(active or not active) inside the store?


Solution

  • You could use a flux pattern action -> dispatcher -> store (change state & notify) and have a parent component pass down the state through props.

    You can also have parent component pass a callback to your button through props to change the parent component's state, which is being passed down to your menu (again, through props).

    IMHO, it's better to do it through flux pattern by making your UI state global. It's also useful in cases where other components need to know the changes in the UI state.

    Also, this blog post might be worth reading: http://www.thomasboyt.com/2014/09/15/no-fit-state.html