React Js onClick inside render

Question

I have a ul li list inside the render method and there is an onClick event on li which call this.handleClick function and state gets changed

var InspirationFilter = React.createClass({
    getInitialState: function() {
        return {currentFilterText:"Top All Time", currentFilter:"top_all_time", showUl:false};
    },
    handleClick: function(filter, filterText){
        this.setState({currentFilterText:filterText, currentFilter:filter, showUl:!this.state.showUl});
    },
    render: function() {
        return (
            <ul>
                <li onClick={this.handleClick('top_all_time', 'Top All Time')}>Top All Time</li>
                  <li onClick={this.handleClick('top_this_week', 'Top This Week')}>Top Week</li>
                <li onClick={this.handleClick('top_this_month', 'Top This Month')}>Top Month</li>
            </ul>
        );
    }
});

But this code gives me the error

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

I tried to use bind with the click event like this,

return (
    <ul>
        <li onClick={this.handleClick.bind(this,'top_all_time', 'Top All Time')}>Top All Time</li>
        <li onClick={this.handleClick.bind(this,'top_this_week', 'Top This Week')}>Top  Week</li>
        <li onClick={this.handleClick.bind(this.'top_this_month', 'Top This Month')}>Top  Month</li>
    </ul>
);

The above error is gone now but ran into another error which is as follows,

Warning: bind(): You are binding a component method to the component. React does this for you automatically in a high-performance way, so you can safely remove this call. See InspirationFilter

In the react documentation Communicate Between Components they are also using the bind method.

Any suggestions to fix it?

Answer 1

The problem is that onClick value has to be a function, so just create a helper method that creates such a function for you:

createClickHandler: function(filter, filterText){
    return function() {
        this.setState({...});
    }.bind(this);
},

render: function() {
    return (
        <ul>
            <li onClick={this.createClickHandler('top_all_time', 'Top All Time')}>Top All Time</li>
            <li onClick={this.createClickHandler('top_this_week', 'Top This Week')}>Top Week</li>
            <li onClick={this.createClickHandler('top_this_month', 'Top This Month')}>Top Month</li>
        </ul>
    );
}

React is really just a bit over-helpful here with its warning. Your reason for using bind() is no to bind this, but rather to bind the arguments.

Why it works? This solution avoids the re-binding warning because it's not re-binding an already bound this.handleClick, but instead creating a new function (that's not yet bound to anything) and binding that.

Answer 2

To summarize, in your first example, when you use this format:

onClick={this.functionName(arg1, arg2)

you are calling the functions rather than providing a reference to the functions. Hence they are being called directly every time it is being rendered rather than onClick as intended.

When you use the format:

onClick={this.functionName.bind(this, arg1, arg2)}

you are providing a reference to the function and binding context and arguments, rather than calling it. This is the correct method; ignore the warnings (even though there are way too many and it's really annoying)