update state from child in React

Question

I'm trying to create a menu where the user should create a character details but I'm having an issue to update the Options states through an input of a child.

var Name = React.createClass({
  render: function(){
    return(
        <input type="text"/>
    )
  }
});

var Options = React.createClass({   
  getInitialState: function(){
    return{
        name: ''
    }
  },
  render: function(){
    return (
        <div>
            Name: <Name onChange={this.updateName} value={this.state.name} />
        </div>
    )
  },
  updateName: function(evt){
    this.setState({
        name: evt.target.value
    });
  }
});

How can I go about updating the Option states using the input from Name?

Possible duplicate of [passing data from child to parent component - react - via callback function](https://stackoverflow.com/questions/44754051/passing-data-from-child-to-parent-component-react-via-callback-function) — Vasi, Jun 27 '17 at 00:38

Mamdouh Alsarayreh · Accepted Answer · 2017-06-27T00:19:21.873

you need onChange function on the Name component as well, that sends the value to the parent component

Try this:

var Name = React.createClass({
  onUpdate: function(evt) {
      this.props.onChange(evt);
  }

  render: function(){
    return(
        <input type="text" onChange={this.onUpdate} value={this.props.value}/>
    )
  }
});

var Options = React.createClass({   
  getInitialState: function(){
    return{
        name: ''
    }
  },
  render: function(){
    return (
        <div>
            Name: <Name onChange={this.updateName} value={this.state.name} />
        </div>
    )
  },
  updateName: function(evt){
    this.setState({
        name: evt.target.value
    });
  }
});

score 0 · Answer 2 · answered Jun 27 '17 at 00:36

0

Component Communication in React

Refer this link to know what are the ways to communicate between React components.

answered Jun 27 '17 at 00:36

Vasi

1,147
9
16

update state from child in React

2 Answers2