bind() in render method gives me a warning?

Question

My code is working properly but it gives me a 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.

I also use onClick={this.myFun.bind(null,"myvalue")} as describe in the Why does React warn me against binding a component method to the object?

Still it give me warning.

My Code :

var MyClass = React.createClass({
  myFun : function (value){  
      console.log(value);  
  },
  render: function () {
  var that = this; 
    var card = this.props.data.map(function (val,key) {
      return (
        <p onClick={that.myFun.bind(null,val)}> Click Me</p>
        );
    });
    return (  
        <div>
        {card}  
        </div>
      );
  }
});

You are getting this warning because `myFun` is already bound. You could do `
` instead. — Felix Kling, Jul 21 '17 at 05:56

Shubham Khatri · Answer 1 · 2017-07-21T06:00:38.913

There are a few things wrong with your code

render: function () { var this = that;

should be

render: function () { var that = this;
return ( {card}) will give an error that you may have returned undefined or null or an Object and hence you need to wrap it inside a div like <div>{card}</div> to return a React Element.
You component name must begin with a upper case Character. See the explanation here: React - Adding component after AJAX to view

See the working demo

var MyClass = React.createClass({
  myFun : function (value){  
      console.log(value);  
  },
  render: function () {
    var that = this;
    var card = this.props.data.map(function (val,key) {
      return (
        <p key={key} onClick={that.myFun.bind(null,val)}> Click Me</p>
        );
    });
    return (
        <div>{card}</div>
      );
  }
}); 

ReactDOM.render(<MyClass data={['1', '2']}/>, document.getElementById('app'))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.js"></script>
<div id="app"></div>

NOTE: React.createClass is deprecated and will be removed in v16.0 and hence you should write your component by extending React.Component syntax

*"will give an error because card may be undefined or null "* No it won't. It's actually object shorthand notation and will be the same as `{card: card}`. Of course that won't work because `render` is supposed to return a react element, not an object. So, it's wrong but not for the reasons you mentioned. And while you are right about all these things, you are still not solving the problem the OP asked about. — Felix Kling, Jul 21 '17 at 05:59
@Shubham Khatri, sorry for the silly mistake but I already try your suggestion. But it doesn't work for me. It still give me a warning. — Pulkit Aggarwal, Jul 21 '17 at 05:59
@FelixKling I missed that in my answer. Thanks for reminding — Shubham Khatri, Jul 21 '17 at 06:01

score 0 · Answer 2 · answered Jul 21 '17 at 05:49

The only you missed is assign that to this

var myClass = React.createClass({
  myFun : function (value){  
      console.log(value);  
  },
  render: function () {
    var that = this; 
    var card = this.props.data.map(function (val,key) {
      return <p onClick={that.myFun.bind(null,val)}> Click Me</p>;
    });
    return <div>{card}</div>;
  }
});

Austin Greco · Answer 3 · 2017-07-21T06:19:59.053

The best way to do this is to extract it into a sub-component and pass the params as props. This way you won't be creating a new function on every render, and will prevent unnecessary re-renders (More info here jsx-no-bind):

var Item = React.createClass({
  handleClick: function() {
    this.props.onItemClick(this.props.val);
  },
  render: function() {
    return (
      <p onClick={this.handleClick}>Click Me</p>
    );
  }
});

var MyClass = React.createClass({
  myFun: function (value){  
      console.log(value);  
  },
  render: function () {
    var that = this; 
    var card = this.props.data.map(function (val, key) {
      return (
        <Item onItemClick={that.myFun} val={val} />
      );
    });
    return (
      <div>{card}</div>
    );
  }
});

ReactDOM.render(
  <MyClass data={['a', 'b', 'c']} />,
  document.getElementById('test')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="test"></div>

Also you should look into using or learning es6, which will clean up your code considerably.

I can't do this because i am using so many bind for other function too. So I can't make classes for all that. — Pulkit Aggarwal, Jul 21 '17 at 06:26

bind() in render method gives me a warning?

3 Answers3