All right guys, it's time for a challenge.
We covered quite a lot in the last lesson and I want to be sure that before we move on you're really
understanding what's going on behind the scenes here. Because as lessons progress things get more and
more complex,
and if you don't have a firm grasp of the concepts here then it's going to get harder next time.
So in this challenge, I've updated the App.jsx and I've renamed some of these things.
For example instead of the fullName, this is now named contact and setContact.
And the idea is that we want to be able to use these values that the user have typed into these three
inputs and put them into the h1, as well as a new paragraph element.
So your job is to make this code work, basically.
And the final outcome should allow the user to type their first name which shows it in here,
their last name which shows it in the h1, and also an e-mail which will show up in a paragraph just below
the h1, like this.
So use the React Developer Tools to peek at what the state is looking like as you are changing your
code.
And remember to apply the things that we've talked about in the previous lessons, including managing
state with Javascript objects, making use of the previous state when updating, working with forms in
React, and handling events.
But I think at this point it's probably a good idea for me to leave you to just get on with it and see
how you get on.
Have a struggle with this
and then once you're done come back and we'll walk through the solution together.
All right.
So we've got this const called contact and it's set to an object that has three properties. And we
can update contact using setContact.
So when do we want that to happen?
Well, probably when each of these inputs gets changed.
So instead of typing the same thing out three times you can also just hold down the option key and click
to make your cursor work on multiple lines.
And here I'm going to add the onChange attribute and I'm going to set it to call a method called handleChange(),
which I'm going to define just right here. And I'm going to get past an event when each of those
inputs change. And inside this function, I'm going to create a new destructured object,
so with the curly braces. And the thing that I want to destructure is the event.target because I
know I've got event.target.name, .placeholder, .value and I only want to get a hold of the
.name and .value properties from this event.target.
So now that I've destructured this into two const's, I can now use it in my code and try to handle
this change. The next step is somehow updating this contact object, but only updating the fields that
have changed.
Let's first call the method that updates the contact which is setContact().
And I know already that I'm going to need to get hold of the previous value of contact.
So let's go ahead and create a new arrow function here and tap in to the previous value, or previous
contact, whatever it is you decide to name it inside this arrow function.
And here you can log to see what the value of previous value is,
if you forget how it works.
But essentially, what we want to do is we want to check to see if the name of the input is equal to
fName,
so this first input here.
Well then, we want to go ahead and return an object where we only change the fName, but else-if the name
that was actually passed over happens to be the lName or if it happens to be the email,
well in these cases we probably want to return a different object.
So I'm going to again hold down option and click on each of these three places and I'm going to write
my return statement, so I return an object in each of these cases. And then I'm going to add the names
and values of my properties.
In this case, I'm actually returning the same thing in exactly three places,
but now I get to update it. If the name of the input was fName, well then the new value is probably going
to be this one, if the name was lName then the new value is going to be this one,
and if the name was email then the new value is going to be this one. Now that I've got this very, very
long setContact I can go ahead and try out my app. So I'm going to open up my Chrome Developer Tools,
take a look at my components, select my app, expand the state of my object. First name when I start typing
you can see it goes in here, last name
when I start typing, it only modifies last name without affecting anything else.
And finally, email also works the same way. By peeking at this object,
if you do have any unexpected things happening on screen, then this can obviously help you out a lot.
Did you manage to get the solution right?
If not, be sure to head back to your code and try to make sure that it works using what you've learned
in this video.
And the idea is really to get comfortable with what's actually happening behind the scenes here, where
we're checking for the name of the input that triggered the handleChange and then we're using the new
value from that event to populate a different field depending on which one was changed.
Now the last thing to remember to do is to add the value attribute to each of the inputs and keep them
tied to the state.
So I'm going to type out the value attribute here, and then the first one is going to be
contact.fName,
the second is contact.lName, and the last one is
contact.email.
Now,
this code is very, very long,
and even though the idea here is to try to make sure that it really makes sense to you when you're learning
these new concepts, there's much, much shorter ways of writing this.
That is what we're going to tackle in the next lesson.
I'm going to show you how we can reduce all of this down to just two or three lines by using something
from ES6 called the spread operator. So for all of that and more,
I'll see you there.