React: this is null in event handler

Question

I have a LoginForm component. I want to check before submit, that both loginName and password is set. I tried with this code (a lot of stuff omitte

Answer 1

You have not bound the this to your class; You can use ES6 class properties feature to get around the problem in the cleanest way; So all you need to do is:

   submit = (e) => {
      // some code here
   }

The arrow function will auto bind it; Much nicer than binding it in a constructor; the most important thing is never ever do it this way:

onSubmit={() => this.submit()}

This will create a function which is an object in javascript and it will take some memory and is now residing inside your redner function! which makes it so expensive. render function is part of the code that runs so many times and each time your submit function is also created and you will end up with some performance relates issues. So your code should be like:

class LoginForm extends Component {
  submit = (e) => {
    // some code here
  }

  render() {
    return (
        

          Sign in
        
      );
    }
}

export default LoginForm;

Here you will not have the performance issue, also you will not have the binding issue and your code looks much nicer.