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 bit complex for me:

    {this.onClick.bind(this, 'someString')}>
and
     <form onSubmit={handleSubmit(this.handleFormSubmit.bind(this))}>

Answer 1

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>
         )
       }
     }