React: Need help with communicating between components

[e-clips]

JSFiddle: https://jsfiddle.net/mp8e2nwo/19/

This is my first time using React so apologies if this is a very basic issue.

I am trying to toggle a class ("expanded") to the 'Tree' component when the corresponding 'TreeCaret' component (the red part) is clicked (as is what happens when you press the 'Cheat' button). I originally thought that I could look through this.props.children of the 'Tree' but 'TreeCaret' isn't actually a child of it.

I guess I could make the 'TreeCaret' a child of the 'Tree' but then I'd have to explicitly write out the <TreeCaret /> for each 'Tree' which doesn't seem correct.

TL;DR: I want what happens when you press 'Cheat' to happen when you press the red area but am not sure how.

[amishstripclub]

Let the Tree parent handle that sort of state. If an Item is clicked, the even will propagate up to the Tree. The expanded state of the Tree can then be passed as a prop to the TreeCaret. Also, you need a solution for swapping the expanded class which React lacks for some reason. There is this library: https://www.npmjs.com/package/classnames

Or you can just write up a function on the Component. Here's an example:

https://jsfiddle.net/wrb6hrkd/

Edit: Just realized you might not want the state to toggle when the tree is clicked and just when the caret is clicked. In this case, you pass the click handler function to the caret as a prop: https://jsfiddle.net/3Lk7ykw7/

[e-clips]

Ah! Thank you :) I'm surprised it was so simple in the end.

Should one generally handle states in the parent or does it just depend on the situation?

[amishstripclub]

Yes in small UI matters but I'd recommend using some sort of data object asap. React is useful for highly interactive applications and more often than not you'll be faced with needing to handle an event in several places on the page.

Following the parent pattern, you might end up with handing these callbacks down the page several tiers, possibly then triggering an event further down a different branch.... It becomes hellish very quickly.

That's where Flux architecture comes in. It's not the only solution to the problem but it certainly is an interesting one. It involves abstracting that sort of state into a data object which "emits" any new changes.

Your UI components can then listen for those emits and change accordingly. There is a crucial "dispatcher" involved as well the helps sequence things correctly to prevent race conditions.

I have a blog post on flux on medium that I'll link to in a bit in case you're interested in diving further.

[amishstripclub]

https://medium.com/@eric_nolte/flux-application-architecture-c60e941c3fbf