In Reactjs how do I update the correct value in the parent state with a callback that's been passed to a nested child component?

Question

I've been on this one for days, and all my reading hasn't helped me find a clean solution for this particular case.

Issue

I can send a parent state value and callback down to a nested component, but once the callback is triggered in the child I don't know how I can send the updated value back to the parent so it can update the correct value.

For instance

Parent Component (Has values and the callback)

Child Component (Values and callback is passed here)

Grand Child Component (Values Updated here and callback triggered)

What is SEEMS to cause the Issue

It seems the issue is I need the original key name in order for "setState" to update the correct value in the parent component(or at least it seems that way), but the child component only has original value and new updated value and has no access to the key associated with original value in the parent component.

Important Notes on Best Practice Surrounding this question

-From what I understand it is bad practice to use refs to handle nested situations like this.

-It seems like there is a cleaner solution than sending a prop for the key and another for the value.

-I'm assuming also that flux might provide a solution to this issue but I feel that there is a basic component to component communication technique or principle that I'm missing here.

Here is a bare bones example of what I'm dealing with.

/*All the values need to be updated here so that the inputs can used  for calculation and then sent to a component that displays the output*/
var Calculator = 
      React.createClass({
        getInitialState:function(){
      return {
          value1: "Enter value 1",  /*These values are passed to a nested child component, can't figure how to update the right one*/
          value2: "Enter value 2",
        }
      },
      update: function(update){
        this.setState(
            update
          );
      },
        render: function () {
          return (
            <div>
              <h2>Input</h2>
              <Input onClick={this.handleClick} update={this.update} value1={this.state.value1} value2={this.state.value2} /> //pass the values here

              <h2>Output</h2>
              <Output />
            </div>
          );
},

handleClick: function () {
//want to update the state for the correct value here

}
});

/* A compenent that is a middle layer between the parent and nested child component I'm working with*/
var Input =                         
  React.createClass({
     update: function(){
        this.props.update();
      },
      render:function(){
          return (
                  <div>
                  <p><InputComponent update={this.update} value={this.props.value1} /> / <InputComponent value={this.props.value2}/></p>//passing down values again
                  <p><ButtonComponent onClick={this.props.onClick} /></p>
                  </div>
              )
      }
  });

/*This is the child component that gets the value and call back from the top level component. It will get updates to the values and send them back to change state of the parent component.*/
var InputComponent = 
  React.createClass({
      handleChange: function(event) {
          this.props.update();
      },
      render: function() {
          return <input type="text" value={this.props.value} onChange={this.handleChange} />; //this props value has no key associated with it. Cant't make update object ie {originalkey:newValue}
      }
});
/* This component is triggered to carry out calculations in the parent class.*/
var ButtonComponent = 
React.createClass({
    render:function(){
        return <button onClick={this.handleClick}> {this.props.txt} </button>
    },
    handleClick: function(){
      this.props.onClick();
    }
});

/*The inputs will be calculated and turned to outputs that will displayed here.This component doesn't matter for the question so I left it empty*/
var Output =                         
  React.createClass({
  });

Ben Ben · Accepted Answer · 2015-05-11T00:10:39

Here's an example I just put together on jsfiddle.

Instead of putting update in setState, we pass a value to update from the child component and let the parent set its state.

In the parent, we have:

_update: function(val){
    this.setState({
        msg: val
    });
},
render: function() {
    return (
    <div>
        <p>Message: {this.state.msg}</p>
        <Child _update={this._update} />
    </div>
    );
}

And in the child, we have a _handleClick function that calls the parent _update function with values:

_handleClick: function(){
    this.props._update(React.findDOMNode(this.refs.text).value);
},
render: function(){
    return (
        <div>
            <input type="text" ref="text" />
            <button onClick={this._handleClick}>Update</button>
        </div>
    );
}

In Reactjs how do I update the correct value in the parent state with a callback that's been passed to a nested child component?

1 Answers