Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Well done!
You have completed React by Example!
You have completed React by Example!
Preview
In this video, we'll connect the toggleConfirmationAt function to the Guest component.
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
In the last video we wrote a method
called toggleConfirmationAt that took
0:00
an index as an argument,
then it found the corresponding array and
0:04
the state and flipped the Boolean
corresponding guest confirmed status.
0:09
So lets pass the toggleConfirmationAt
method down to the Guest component and
0:14
bind it to the check box's change event,
so I'll scroll down to the GuestList
0:18
component, And I'll pass it a new
prop called toggleConfirmationAt,
0:23
And I'll pass it the function
with this.toggleConfirmationAt.
0:32
Now I'll open up the GuestList component
and add our new prop to the propTypes.
0:37
Let's say toggleConfirmationAt:,
PropTypes.func.isRequired.
0:45
Then in the Guest component
I'm going to add a new prop,
0:55
let's call it handleConfirmation.
1:00
And we really want the
toggleConfirmationAt function to be called
1:06
when the check box is changed
on the guest component.
1:10
But because the change event takes
place in the guest component
1:13
We'll need to pass this handle down
through the guest component's props.
1:16
Now our handler requires an index.
1:21
Remember, individual guest components
are unaware of any other guest in the app,
1:23
much less their position
in the state's guest array.
1:28
So the knowledge of a guest
position is in this component,
1:30
GuestList and it's available
from the index variable here.
1:35
So as the value for
handle confirmation.We'll create
1:39
a new function that will
call toggle confirmation at
1:45
with props.toggleConfirmationAt(index).
1:50
Remember in JavaScript functions remember
the scope in which they are declared.
1:55
So even though this function
will be passed down and
1:59
called inside the guest component it
will remember the value of index and
2:03
pass it into toggleConfirmationAt
this is known as a closure.
2:08
And if you're unfamiliar with this concept
or need a refresher I recommend checking
2:12
the teachers notes for resources
closures come up often and React.
2:16
All right now that our handler is
available in the guest component
2:20
let's open up Guest.js and
edit to the propTypes.
2:25
Say handleConfirmation,
PropTypes.funcisRequired.
2:31
And now we can bind it to
the checkbox's change event.
2:42
So, in the input, say onChange,
2:46
Pprops.handleConfirmation.
2:53
So when the change event occurs, this
function will receive an event object.
2:57
Over in GuestList, the function we
created here would receive that
3:03
object if we added a parameter here for
example, event.
3:07
Now we might need this event if we
wanted the value from this input but
3:13
since we know we're just going to
flip the isConfirm property for
3:18
this guest we don't need to
pass that back to the tree.
3:22
Now you might be thinking that when the
user clicks this box it visibly changes,
3:25
and then passes that information
to the state or the handler.
3:30
Well, it's a slightly different sequence.
3:34
You see, the check box's state is being
managed by the app component's state.
3:36
So it only visibly changes
when that state changes.
3:42
So the information is making a loop or
a circuit.
3:46
When changes are made to the UI,
the state changes in response.
3:49
Changes in the state, then,
result in changes to the UI.
3:53
So when we look at our app in the browser,
you can see that when I click on
3:56
the check boxes, they change and
that's what we were hoping for.
4:01
I can even open up the React dev tools and
unfold the state object and
4:05
you can see the state is changing to
reflect what we're seeing on the page.
4:10
So isConfirmed changes from true to false.
4:17
Great.
4:26
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up