Access Parent Class Method from Child in ReactJS

Question

I have a small problem where I have parent class and child class. I want to modify the state that was initialized in parent class so that I can see updated state in parent class. Here's the code:

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

    _increaseValue: function(){
        this.state.my_value++;
    },

    render: function(){
        return(
            <div><Child /></div>
        )
    }
});

var Child = React.createClass({
    render: function(){
        //at button I want to access _increaseValue function of parent
        return (
            <div>
                 <button onClick={_increaseValue}>Increase</button>
            </div>
        );
    }
});

Now when user clicks the button in child class I would like to get the updated my_value in parent class, thus my questions are:

Is it possible?
If yes, how it is done?
Is this good practice or no?

Oleksandr T. · Accepted Answer · 2016-04-06 06:30:30Z

2

Is it possible?

yes, it is possible

If yes, how it is done?

you can pass parent method to child through props, like so

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

  onChangeValue: function () {
    var value = this.state.my_value + 1;

    this.setState({
      my_value: value
    })
  },

  render: function() {
    return <div>
      <Child 
        onChangeValue={ this.onChangeValue } 
        value={ this.state.my_value } 
      />
    </div>;
  }
});

var Child = React.createClass({
  _handleClick: function(){
    this.props.onChangeValue();
  },

  render: function(){
    return <div>
      <h1> { this.props.value  } </h1>
      <button onClick={ this._handleClick }>Increase</button>
    </div>
  }
});

Example

Is this good practice or no?

It is good practice

answered Apr 6, 2016 at 6:30

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Oleksandr T. Over a year ago

@Amir Al could you create fiddle with code where you use props?

Oleksandr T. Over a year ago

@Amir Al ok, I understood

Aleksandr Petrov · Accepted Answer · 2016-04-06 06:29:52Z

You need to pass function via props into your child component. And when you need to change you call this function. It is normal practice and react way.

Example:

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

    onChildClick: function() {
        this.setState({
          my_value: this.state.my_value + 1
        })
    },

    render: function(){
        return(
            <div>
              {this.state.my_value}
              <Child onClick={this.onChildClick.bind(this)}/>
            </div>
        )
    }
});

var Child = React.createClass({
    _handleClick: function(){
        this.props.onClick();
    },

    render: function(){
        return (
            <div>
                 <button onClick={this._handleClick}>Increase</button>
            </div>
        );
    }
});

Example on JSFiddle

Collectives™ on Stack Overflow

Access Parent Class Method from Child in ReactJS

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related