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?
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.
Collected from the Internet
Please contact [email protected] to delete if infringement.
Comments