React.js Call Parent Function From Child

I know there are a few similar questions here and here but I am having a tough time understanding what is the correct thinking today on this and extrapolating it to my situation. I

Solution 1:

You need to pass handleScoreRemove through props

var scoreNodes = this.props.data.map(function(score) {
  return<Scorekey={score.id}id={score.id}team1_name={score.team1_name}team1_score={score.team1_score}team2_name={score.team2_name}team2_score={score.team2_score}handleScoreRemove={this.handleScoreRemove.bind(this)}></Score>
}, this);

and in Score component call it like this

removeRecord: function(e) {
   this.props.handleScoreRemove( /* add arguments what do you need */ );
},

Solution 2:

call parent function from child

You don't (like what the other posts say). You passhandleScoreRemove into the child as a prop. Inside the child, you call the function by calling the prop. In the following, handleScoreRemove is passed as the onScoreRemove prop inside the child.

<Score...stuff...onScoreRemove={this.handleScoreRemove}></Score>

You're already doing the same thing with the ScoreBox (parent) and ScoreForm (child). You're passing a reference of handleScoreSubmit as onScoreSubmit prop in the child.

<ScoreForm onScoreSubmit={this.handleScoreSubmit} />

Solution 3:

You should pass handleScoreRemove as a prop to Score:

In ScoreList:

var scoreNodes = this.props.data.map(function(score) {
  return (
    <Scorekey={score.id} (...) handleScoreRemove={this.handleScoreRemove}></Score>
  );
});

In Score:

removeRecord: function(e){
  this.props.handleScoreRemove(this);
}