Having .bind inside a JSX prop also creates a new anonymous function on each render.
To avoid it, you can do (sorry for bad formatting):
class Thing extends React.Component {
handleClick = (thingId) => {
this.setState(/*stuff*/);
}
render() {
return <div>{things.map(thing => <Thing onClick=
{this.handleClick} />)}</div>
}
}
You can also bind handleClick inside the constructor without the arrow. constructor(...args) {
super(...args);
this.handleClick = this._handleClick.bind(this);
}
_handleClick(thing) {
// stuff
}