Why does React not allow you to bind an event to a function?

Question

My code below gives me the error similar to this question:

"Cannot update during an existing state transition (such as within render). Render methods should be a pure function of props and state."

class BookList extends React.Component
{
    removeBook(bookName)
    {
        Actions.UpdateBooks();
    }

    render()
    {
        return (
            <TextField defaultValue={this.book.name}  />
            <i  onClick={this.removeBook(this.book.name)} />
        );
    }
}

Makes sense - the function is called every time render occurs.

So I changed the binding to

onClick={function() {this.removeBook(book.name);}

and now the method is never called when I click. Why?

I found that arrow functions and rebinding this as per the answers below still didn't work. I also had to wrap <i> in <span onclick> otherwise React wasn't adding the event to <i>. — Richard
– Richard, Commented Nov 12, 2015 at 11:56

Oleksandr T. · Accepted Answer · 2015-11-12 11:30:36Z

2

You should use .bind, because now you call function

this.removeBook.bind(this, book.name);

about second case

onClick={function() {this.removeBook(book.name);}

this in this case will be window in window there is not function removeBook that's why you don't get any result(window.removeBook === undefined)., if you use ES6 you can use arrow function

onClick={() => this.removeBook(book.name) }

in this case this refers to parent scope

edited Nov 12, 2015 at 11:30

answered Nov 12, 2015 at 11:12

Oleksandr T.

77.6k17 gold badges177 silver badges145 bronze badges

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

Comments

stecb · Accepted Answer · 2015-11-12 11:15:02Z

1

You're using es6 classes, so automatic binding isn't working: You could use arrow functions (w/ lexical this) like so:

<i onClick={() => this.removeBook(this.book.name)} />

answered Nov 12, 2015 at 11:15

stecb

14.8k3 gold badges55 silver badges69 bronze badges

Collectives™ on Stack Overflow

Why does React not allow you to bind an event to a function?

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related