By passing down callback functions as props. One of the basic patterns of React is that parents communicate to their children by passing down data as props, and they also pass down callback functions that a child can execute to communicate upwards.

There's a great article that describes various component communication patterns at http://andrewhfarmer.com/component-communication/ .

Thanks. Exactly what I was looking for.

Also, take a look at optional libraries such as redux (and its friends, e.g. redux-saga or redux-thunk). You don't have to use them, but when your codebase starts getting complicated with lots of callback, perhaps using those state management libraries would help.

You may want to have a read at Redux (http://redux.js.org) or any Flux type of container.

Basically, you don't propagate directly to your parent. In React there should be only one source of truth. So in your case, the event in a low level component should emit an action that will modify data in your Store/Container/Model. Then this change will be passed down (with the correct setup) as props to all of your components.

>React best practises question - At what level should event handlers be installed? At lowest level components or the highest level?

I personnally prefer when the handlers are close to the associated JSX. I doubt there is any requirement on this other than maintainability.

I don't think it is a good idea to drag Redux and Flux into the discussion when someone asks a basic question about React.

I think that depends, many would argue that a flux implementation is an easier way to reason about the problem set, thus their existence. Making someone aware that this is what flux implementation where designed (in part) to address, allows them to see the full scope of possible ways to accomplish their goal. I see nothing wrong with saying "hey that is why these guys built this library".

He was asking for best practices, certainly a sizable amount of developers would argue to use a flux implementation for that particular problem, as a best practice.

Still, you start with the basics, too many people are scared away from React because when someone asks a basic question about React, the answer typically goes something like this "oh, you better use Redux/Immutablejs/Redux-Saga/Babel/Webpack/etc". Usually without even addressing the actual problem.

In this particular case it would be totally OK if the answer included Redux. Because, like you said, it is relevant. But it should go something like "Pass event handlers from parent to child component. If you find a lot of components are merely passing through a lot of data and event handlers to child components without using it you should have a look at Redux".

You should have a look at acemarke's response and neurostimulants follow-up, together they answered this question perfectly.

You pass the event handler from the parent component to the child component as a prop.