How to change the state of one component from another?

react
1

I am using React-Toolbox and I have an AppBar with a hamburger icon button that changes the state of a NavDrawer. How do I translate the click event on that hamburger icon to a change in state in the NavDrawer?

Here is the official react documentation about communication between different components:

For communication between two components that don’t have a parent-child relationship, you can set up your own global event system. Subscribe to events in componentDidMount(), unsubscribe in componentWillUnmount(), and call setState() when you receive an event. Flux pattern is one of the possible ways to arrange this.

I was thinking of using Meteor Sessions for this, is it a good idea?

2

Sure, you can use Session, ReactiveDict, or a client-side collection for this. Check out this part of the Meteor Guide: https://guide.meteor.com/data-loading.html#stores

1 Like
3

@sashko Thanks for pointing me to the right resource. I chose to use a Session for achieving this and here is a conceptual diagram of what I have done to make it work:

1395×1590 76.9 KB

It looks overly complicated and I must admit it’s not intuitive. Am I doing it right?

You can see from the diagram that passing the App component’s state to the NavDrawer is not reactive. Why is it?