JSX props should not use .bind()

Question

How to fix this error when I have the binding this way: previously binding in constructor solved but this is a bit complex for me:

{this.onClick.bind(this, 'someString')}>

and

<form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

anoop · Answer 1 · 2016-11-23T20:28:29.357

44

Option 1:

Use arrow functions (with babel-plugins) PS:- Experimental feature

class MyComponent extends Component {
   handleClick = (args) => () => {
      // access args here;
      // handle the click event
   }

   render() {
     return (
       <div onClick={this.handleClick(args)}>
         .....
       </div>
     )
   }
 }

Option 2: Not recommended

Define arrow functions in render

   class MyComponent extends Component {
       render() {
         const handleClick = () => {
          // handle the click event
         }
         return (
           <div onClick={handleClick}>
             .....
           </div>
         )
       }
     }

Option 3:

Use binding in constructor

   class MyComponent extends Component {
       constructor() {
         super();
         this.handleClick = this.handleClick.bind(this);
       }

       handleClick() {
          // handle click
       }

       render() {

         return (
           <div onClick={this.handleClick}>
             .....
           </div>
         )
       }
     }

edited Nov 23 '16 at 20:28

answered Nov 23 '16 at 20:21

anoop

3,229
23
35

1

The first option is called ["class property"](https://babeljs.io/docs/plugins/transform-class-properties/) and it's an experimental babel plugin – Paolo Moretti Nov 23 '16 at 20:24
@PaoloMoretti yes, thats right. I updated the answer. Thanks for pointing it – anoop Nov 23 '16 at 20:25
How do you pass arguments with the first option? – Shota Nov 23 '16 at 20:26
yea, the main issue I have is how do I pass the arguments? I am already doing Option3 in my code for other simpler functions... – monkeyjs Nov 23 '16 at 20:27
@shota updated now, use closures to solve the problem – anoop Nov 23 '16 at 20:29
That looks cool. Will the first argument of the closure be event object (for example to get input value)? – Shota Nov 23 '16 at 20:35
Second function has the event, `handleClick = (args) => (event) => {...}` – anoop Nov 23 '16 at 20:36
Option 1 will create a new function every time. – Brandon Jun 06 '17 at 17:19
@Brandon It will create the function in each render if its defined inside render function. In option 1 it wont – anoop Jun 06 '17 at 20:44
With Option 3, how would you pass in parameters? – theineffablebob Jul 24 '18 at 21:25
@theineffablebob need to make handleClick as a closure, handleClick => (arg) => (event) => {} and call as this.handleClick(arg) – anoop Jul 24 '18 at 21:49
binding in constructor is the best practice. – red_wolf Feb 25 '22 at 06:57

score 8 · Answer 2 · edited Sep 24 '17 at 16:21

I recommend you to use binding in the class constructor. This will avoid inline repetition (and confusion) and will execute the "bind" only once (when component is initiated).

Here's an example how you can achieve cleaner JSX in your use-case:

class YourComponent extends React.Component {
    constructor(props) {
        super(props);

        // Bind functions
        this.handleClick = this.handleClick.bind(this);
        this.handleSubmit = this.handleSubmit.bind(this);
    }

    handleClick() {
        this.onClick('someString');
    }
    onClick(param) {
        // That's your 'onClick' function
        // param = 'someString'
    }

    handleSubmit() {
        // Same here.
        this.handleFormSubmit();
    }
    handleFormSubmit() {
        // That's your 'handleFormSubmit' function
    }

    render() {
        return (
            <form onSubmit={this.handleSubmit}>
                <p>...</p>
                <button onClick={this.handleClick} type="button">Cancel</button>
                <button type="submit">Go!</button>
            </form>
        );
    }
}

This does not work - infinite loop - bundle.js:10623 Warning: setState(...): Cannot update during an existing state transition (such as within `render`). Render methods should be a pure function of props and state. — monkeyjs, Nov 24 '16 at 20:50
Hey @monkeyjs , I just updated my answer with a code example for your use-case. Please try this way. If you again receive the same error, the issue is somewhere else. Then please share more complete code example and I'll try to help you. — Kaloyan Kosev, Nov 24 '16 at 22:29

score 2 · Answer 3 · answered May 26 '18 at 09:24

Even though all the previous answers can achieve the desire result, but I think the snippet below worth mentioning.

class myComponent extends PureComponent {

  handleOnclickWithArgs = arg => {...};

  handleOnclickWithoutArgs = () => {...};

  render() {
    const submitArg = () => this.handleOnclickWithArgs(arg);
    const btnProps = { onClick: submitArg }; // or onClick={submitArg} will do

    return (
      <Fragment>
        <button {...btnProps}>button with argument</button>
        <button onClick={this.handleOnclickWithoutArgs}>
          button without argument
        </button>
     </Fragment>
   );
  }
}

JSX props should not use .bind()

3 Answers3