How To Pass A Callback To A Link Without Using Bind

- 1 answer

React is generating thousands of console warnings when I render a link (thousands of times) that uses .bind for the onMouseOut and onMouseOver callbacks.

<a href={'http://localhost:8000/display' + this.props.user_id} onMouseOver={this.handleMouseOver.bind(null)}>show user</a>

The callback handleMouseOver will not fire if I don't use bind, however, as mentioned, if I do use bind, it generates a warning for each time the link is created (which is thousands of times)

How can I pass a callback to this link without generating the warning?

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 module.exports


To update, your current issue is happening because you're using .bind() but not providing any arguments to apply to the function. Because React binds the context for you, .bind(null) is completely useless. You should either add some arguments to the call (.bind(null, arg1, arg2)) or remove it completely and just use this.handleMouseOver.

The error is happening because you're binding to this instead of null. React wants to make it blatantly obvious that it is doing the binding for you - you don't have to worry about it. Change .bind(this, report) to .bind(null, report) and the warning will go away.