CODEWITHSUNDEEP
javascriptreactjs
Sijan Shrestha
Sijan Shrestha

Reputation: 2266

How to pass data from children to parent?

I have a situation where i want to increment the parent value from the children.

parent comonent:

getInitialState :function(){
    return {counter:0}
},

render(){
    <CallChild value={this.state.counter}/>

Child Component: render(){ this.props.counter++;} Any suggestions? Is it even possible to do something like this .

Upvotes: 1

Views: 84

Answers (1)

Oleksandr T.
Oleksandr T.

Reputation: 77482

You can create method(which will change parent state) in parent component and call it in child like this

var CallChild = React.createClass({
  render(){
    return <div>
      <h1>{ this.props.value }</h1>
      <button onClick={ this.props.onClick }>+</button>
    </div>
  }
});

var Parent = React.createClass({
  getInitialState: function() {
    return { counter: 0 }
  },

  handleIncrement: function () {
    this.setState({ counter: this.state.counter + 1 });
  },

  render(){
    return <div>
      <CallChild onClick={ this.handleIncrement } value={this.state.counter} />
    </div>
  }
});

Example

Upvotes: 5

Related Questions