ReactJS dynamic function assignment

Question

I'm new to React and stuck trying assign parent's function to children created dynamically

class Row extends React.Component {

handleStateChange() {
    console.log(this); //just for test
}

render() {
    let notes = [],
        categoryId = this.props.rowNo;

    bonuses.forEach(function (bonus, i) {
        let id = 'cell_' + categoryId.toString() + (i + 1).toString();
        notes.push(<NoteCell bonus={bonus}
                             songName={id + '.mp3'}
                             id={id}
                             key={id}
                                        // that is the point
                             handleRowStateChange={this.handleStateChange}
        />);
    });

    return (
        <div className="row clearfix">
            {notes}
        </div>
    )
}

I get Cannot read property 'handleStateChange' of undefined error. What am i doing wrong?

Ved · Accepted Answer · 2017-04-08 13:11:58Z

2

scope of this inside callback function refer to calling object, not to the react class.So Use ()=> instead of function.

handleStateChange() {
    console.log(this); //just for test
    this.setState({parentState:value})
}

bonuses.forEach((bonus, i) =>{
    let id = 'cell_' + categoryId.toString() + (i + 1).toString();
    notes.push(<NoteCell bonus={bonus}
                         songName={id + '.mp3'}
                         id={id}
                         key={id}
                                    // that is the point
                         handleRowStateChange={this.handleStateChange.bind(this)}
    />);
});

edited Apr 8, 2017 at 13:11

answered Apr 8, 2017 at 12:45

Ved

12.1k5 gold badges46 silver badges61 bronze badges

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

7 Comments

Dmitry Over a year ago

Thanks a lot! I suppose this is best practise in all cases?

Ved Over a year ago

Yes @Dimitry. You should.

Dmitry Over a year ago

By the way console.log(this) print child element but i need to change parent state. How can i do it?

Ved Over a year ago

Check my updated answer and let me know if it works for you.

Dmitry Over a year ago

Sorry, no. this.setState is not a function

|

Todd Chaffee · Accepted Answer · 2017-04-08 13:04:04Z

1

Your this is refering to the bonuses.forEach(function function rather than this from your component class. An arrow function should eliminate that problem.

bonuses.forEach((bonus, i) => {

As an aside, outside of React if you are not using ES6 then you could do this by getting copy of this at the top of your function and then use it inside your function:

render() {
    let notes = [],
        categoryId = this.props.rowNo
        self = this;
        ...

        handleRowStateChange={self.handleStateChange}

But you still have another problem. When you get inside the handleStateChange function, it too will have its own this. You can solve that with a constructor:

class Row extends React.Component {

  constructor (props) {
    super(props);

    this.handleStateChange = this.handleStateChange.bind(this);

  }
...

edited Apr 8, 2017 at 13:04

answered Apr 8, 2017 at 12:53

Todd Chaffee

6,82434 silver badges43 bronze badges

1 Comment

Dmitry Over a year ago

Thanks for explanation!

Collectives™ on Stack Overflow

ReactJS dynamic function assignment

2 Answers 2

7 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

7 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related