`this` is null inside `handleSubmit`

in react 16.0.0 , i call constructor and bind this for handleSubmit and it work!

constructor(props){
        super(props);
        this.handleSubmit = this.handleSubmit.bind(this);
}

I was getting an error that handle submit was not working. Defining the function as:

handleSubmit(e) { e.preventDefault(); let teacherName = this.name.value; let teacherTopic = this.topic.value; let path = teachers/${teacherTopic}/${teacherName}; this.props.history.push(path); }

fixed my problem. Now I wish I knew why the arrow syntax didn't work since it worked for Guil.

The example in the video is not just a simple event handler.

It's part of a class definition, so "this" refers to the class instance. You'll notice that the argument "e" is still used to refer to the event object. That's because one of the differences between conventional and arrow functions is that arrow functions do not define "this".

But you can substitute "e.target" where you might have used "this" in an event handler.

For further information on all the differences between the function types see the MDN page for arrow functions.

Did you declare your handleSubmit function on the Home-component with a normal function syntax or the lambda/arrow syntax?

I can reproduce the exact same problem by defining handleSubmit like that, so my guess (without having seen your code) would be that your function looks something like this:

handleSubmit(e) {
  e.preventDefault();
  let teacherName = this.name.value;
  let teacherTopic = this.topic.value;
  let path = `teachers/${teacherTopic}/${teacherName}`;
  this.props.history.push(path);
} 

I almost stepped into the trap of doing that, but I ended up defining my handleSubmit like this in stead:

handleSubmit = (e) => {
  e.preventDefault();
  let teacherName = this.name.value;
  let teacherTopic = this.topic.value;
  let path = `teachers/${teacherTopic}/${teacherName}`;
  this.props.history.push(path);
}

With that definition I can remove the e => and (e) from my onSubmit handler.

My apologies if this does not help you. In that case I hope it will at least help someone else who might have made this mistake!