In a continuation of the theme of how to pass information around in react, this article details how to call a parent function from a child function. This previous article details how to pass state from parent to child:

React: How to pass state information from parent to child

Allowing a child function to call a parent function works in nearly the same way. When the parent creates the child instance in it’s render function, pass the parent function reference as a prop. For example:

// someParentMethod={this.someParentMethod}
incrementNumberTurns={this.incrementNumberTurns}

Then, in the child function (triggered by an event such as onClick), you can call the parent function as if it is a prop. Like this:

this.props.incrementNumberTurns();

 

Passing child props or values to parent function

In addition to simply calling the parent function as shown above, we can also pass information to the parent by including it as an argument in the parent function. For example:

// Here, clicked_id = the child this.props.id.
this.props.populateXLocations(clicked_id);

For complete React code that demonstrates this in action, see my tic-tac-toe react script here:
https://github.com/chris-relaxing/react-tic-tac-toe/blob/master/tic-tac-toe.js