- Building the GuestList Component 6:12
- Writing a Handler to Confirm Guests 7:46
- Connecting the Confirm Guests Handler 4:27
- Creating Components Review 6 questions
- Toggling Edit State for Guests 8:31
- Changing Guest Name in State 6:11
- Filtering Guests 6:06
- Filtering and Changing State Review 5 questions
- Adding Guests to the List 5:44
- Removing Names From the List 3:42
- Pending Name Submission Feature 4:21
- Creating the Counter 7:14
- Building the Application Review 5 questions
Preview
Video Player
00:00
00:00
Connecting the Confirm Guests Handler
4:27In this video, we'll connect the toggleConfirmationAt function to the Guest component.
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