Reach: Create a Controlled Input Lesson - onChange()

Here is a link to the lesson:

Is onChange() a method? I completed the lesson, however was a bit confused by the inclusion of the “()” in the instruction. Since there was no example provided in the lesson, I was confused about what was meant by " Then add an onChange() event handler set to the handleChange() method." It made it sound like we were supposed to type something like:

<input value={this.state.input} onChange()={this.handleChange()}></input>

I passed the lesson with the following code:

<input value={this.state.input} onChange={this.handleChange}></input>

Where onChange is an attribute of the input JSX element.

I agree, that is not how it should be shown in the challenge text it should just be onChange. It is an event attribute/property.

I think probably best it gets changed as well - it’s just common to write a method/function with the brackets when explaining things (to show it is a method/function), but I get it could be confusing here.

I think you’ve understood exactly what that is: it’s JavaScript written in a syntax that looks like HTML (well, it’s XML, but anyway). And onChange is going to be a method on the object that the JSX gets converted to.

And so if you’ve got (eg)

{
  onChange() {
    // Do some stuff
  }
}

Then that’s valid, therefore

onChange()={ // Do some stuff

Is surely also valid.


What you’re missing here I think is that all the attributes have to get converted to valid JS identifiers, and onChange() is not a valid JS identifier. onChange is. The name of the method in the example object just above is that as well.

I made a PR for it.

I changed the text a bit as well. Calling onChange an event handler does not seem correct. It will contain an event handler but it is not an event handler but a placeholder to be assigned an event handler.


This might be bike-shedding, but there is a subtle distinction between what something is and what it contains.

const numbers = [1, 2, 3];

Yes, you can say numbers is an array. But it is a variable that contains an array. Calling it an array would be fine if you are talking about the array, but if you are talking about the variable it isn’t what it contains. It is just a variable, just like an attribute/property isn’t its value.

1 Like

Makes total sense to me, thanks!

Thanks for the reply @DanCouper ! Ya I think that’s where my confusion is. If we are looking at the JSX below:

<input value={this.state.input} onChange={this.handleChange}></input>

my understanding is that onChange is an attribute (or property) of the <input> element. So including the () there (i.e onChange()={…}) would imply function invocation followed by an assignment operator which didn’t make sense to me. But also since the the onChange is not part of JavaScript syntax (since it’s not wrapped in the {}, it is JSX), I imagine onChange() would simply be syntactically incorrect.

I hope I’m using the right terminology, and what I’m saying makes sense. I’m very much still in the learning phase for all of this.

1 Like