All right guys, it's time for a challenge. 1
We covered quite a lot in the last lesson and I want to be sure that before we move on you're really 2
understanding what's going on behind the scenes here. Because as lessons progress things get more and 3
more complex 4
and if you don't have a firm grasp of the concept here then it's going to get harder next time. 5
So in this challenge, I've updated the App.jsx and I've renamed some of these things. 6
For example instead of the fullName, this is now named contact and setContact. 7
And the idea is that we want to be able to use these values that the user have typed into these three 8
inputs and put them into the as well as a new paragraph element. 9
So your job is to make this code work basically. 10
And the final outcome should allow the user to type their first name which shows it in here, 11
their last name which shows it in the and also an e-mail which will show up in a paragraph just below 12
the like this. 13
So use the React developer tools to peek at what the state is looking like as you are changing your 14
code. 15
And remember to apply the things that we've talked about in the previous lessons including managing 16
state with Javascript objects, making use of the previous state when updating, working with forms in 17
React and handling events. 18
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 19
how you get on. 20
Have a struggle with this 21
and then once you're done come back and we'll walk through the solution together. 22
All right. 23
So we've got this constant called contact and it's set to an object that has three properties. And we 24
can update contact using setContact. 25
So when do we want that to happen? 26
Well probably when each of these inputs gets changed. 27
So instead of typing the same thing out three times you can also just hold down the option key and click 28
to make your cursor work on multiple lines. 29
And here I'm going to add the onChange attribute and I'm going to set it to call a method called handle 30
Change which I'm going to define just right here. And I'm going to get past an event when each of those 31
inputs change. And inside this function, I'm going to create a new destructured object, 32
so with the curly braces. And the thing that I want to destructure is the event.target because I 33
know I've got event.target.name, .placeholder, .value and I only want to get a hold of the 34
.name and .value properties from this event.target. 35
So now that I've destructured this into two constants, I can now use it in my code and try to handle 36
this change. The next step is somehow updating this contact object but only updating the fields that 37
have changed. 38
Let's first call the method that updates the contact which is setContact. 39
And I know already that I'm going to need to get hold of the previous value of contact. 40
So let's go ahead and create a new arrow function here and tap in to the previous value or previous 41
contact whatever it is you decide to name it inside this arrow function. 42
And here you can log to see what the value of previous value is, 43
if you forget how it works. 44
But essentially what we want to do is we want to check to see if the name of the input is equal to f 45
Name 46
so this first input here. 47
Well then we want to go ahead and return an object where we only change the fName but else if the name 48
that was actually passed over happens to be the lName or if it happens to be the email, 49
well in these cases we probably want to return a different object. 50
So I'm going to again hold down option and click on each of these three places and I'm going to write 51
my return statement so I return an object in each of these cases. And then I'm going to add the names 52
and values of my properties. 53
In this case I'm actually returning the same thing in exactly three places, 54
but now I get to update it. If the name of the input was fName, well then the new value is probably going 55
to be this one. If the name was lName then the new value is going to be this one. 56
And if the name was email then the new value is going to be this one. Now that I've got this very very 57
long setContact I can go ahead and try out my app. So I'm going to open up my Chrome developer tools, 58
take a look at my components, select my app, expand the state of my object. First name when I start typing 59
you can see it goes in here, last name 60
when I start typing it only modifies last name without affecting anything else. 61
And finally email also works the same way. By peeking at this object 62
if you do have any unexpected things happening on screen then this can obviously help you out a lot. 63
Did you manage to get the solution right? 64
If not, be sure to head back to your code and try to make sure that it works using what you've learned 65
in this video. 66
And the idea is really to get comfortable with what's actually happening behind the scenes here where 67
we're checking for the name of the input that triggered the handleChange and then we're using the new 68
value from that event to populate a different field depending on which one was changed. 69
Now the last thing to remember to do is to add the value attribute to each of the inputs and keep them 70
tied to the state. 71
So I'm going to type out the value attribute here and then the first one is going to be contact. 72
fName, 73
the second is contact.lName and the last one is contact. 74
Email. 75
Now 76
tThis code is very very long. 77
And even though the idea here is to try to make sure that it really makes sense to you when you're learning 78
the new concepts, there's much much shorter ways of writing this. 79
That is what we're going to tackle in the next lesson. 80
I'm going to show you how we can reduce all of this down to just two or three lines by using something 81
from ES6 called the spread operator. So for all of that and more, 82
I'll see you there.