Lesson code - https://github.com/learnetto/calreact/releases/tag/lesson-4.1-4.3
Now we’re going to look at another ES6 feature - arrow functions.
Arrow functions are shorthand functions which automatically bind to the surrounding context.
So we don’t need to explicitly write .bind(this)
. Let’s try it in the AppointmentForm component.
We can change this.handleSubmit
like this:Arrow functions
Now let's try the app in the browser. I am able to type in the title input field but we’re getting some warnings.Warning: Cannot read property target of undefined.
Oh yes we need to pass in an event to the handleChange
And let’s also add an arrow function to the Datetime input.Pass event to handler functions
If we try the app again in the browser, it works and we're able to create an appointment.
Now let’s add arrow functions in the Appointments component for onUserInput
.Add arrow functions in the Appointments component
Let's also change the variables in this component to constants by replacing the var
keyword with const
One final place we can add another arrow function is in the handleFormSubmit
function inside the .done
call.Replace the explicit bind with an arrow function
So that's a quick introduction to arrow functions.