Now that you know about state and events, it’s time to make your Add Contact form work!
But to start, we’ll wade in at the shallow end with a simple exercise.
All you need to do to make the below input work is add a single line in
Once you’re done, we’ll discuss what that call to
bind in the constructor does.
Most event handlers in React need access to a component’s
this object. And while that may seem painfully obvious, there is a good reason for saying it.
this at any point is, well, it could be anything. There are rules, but they’re far too complicated for mere mortals. And as it happens, the behavior of
this within event handlers usually isn’t what you’d expect.
Now there are a number of ways of fixing this. But the simplest fix is to
bind each handler in the constructor, as demonstrated above.
You can manage an entire form’s state using the same patterns as above. The only difference is scale; as there are multiple inputs, you’ll need multiple event handlers.
I’ve started you off with the contact form component from earlier. But I’ve made one change: instead of accepting
Your task is to connect the inputs to state via event handlers, so that you can type in them.
And since I’m feeling nice, I’ll give you a few hints:
Did you manage to get it to work? If so, congratulations! If not, double check that you’ve bound your event handlers correctly. And if you do need to check the solution, make sure you get your code working afterwards. And once you do, congratulations!
This is an important exercise, as you’ll often come across this pattern in real React apps.
Of course, completing this exercise is still a little bittersweet. You have a working contact form — but it doesn’t have an add button. What kind of contact form is that?
You’re really close to being able to add contacts to your contact list from earlier. All that’s left is finding a way to get the contacts out of the form component.