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
Now that users can add new guests, let's allow them to remove a guest from the app. The logic for this will be similar to handlers we wrote earlier. We'll have to take an index, search through the guests array and modify it.
Resources
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
Now that users can add new guests,
0:00
let's allow them to remove a guest from
the app by clicking it's Remove button.
0:01
The logic for this will be similar
to earlier handlers we wrote in that
0:06
we'll have to take an index, search
through the guest array and modify it.
0:09
Removing an item from an array will
present a unique challenge but
0:13
I'll guide you through it,
let's get to work.
0:17
On previous features we often started by
adding a property to the initial state.
0:19
Well because this feature
involves removing something we
0:24
won't need to add anything.
0:29
So I'll start by creating a handler
just above toggleEditingAt,
0:31
I'll call it removeGuestAt, which will
take an index for an item to remove.
0:36
Then I'll set the state with the guest's
property pointing to a new array.
0:42
Now I'll use the spread operator to put
the contents of two arrays into this one.
0:56
The first array will hold every guest
before the one we want to remove.
1:02
So I'll type ...,
followed by this.state, .guests.
1:06
Then I'll use the slice method
to return a smaller, new array,
1:14
cut at the positions entered as arguments.
1:18
So we'll pass at 0, and index.
1:20
Keep in mind that if you don't enter
a second argument to slice here,
1:23
it will return everything
up to the end of the array.
1:28
So now I'll slice the guest array down
again to produce everything after
1:31
the removed element with
...this.state.guests.slice,
1:38
this time I'll pass slice(index + 1).
1:45
All right,
now that we have the handler setup,
1:49
see if you can wired up
to he remove button.
1:51
Go ahead and pause the video and I'll
show you how I did it when you're ready.
1:53
A handler eventually needs to be
called down in the guest component.
1:59
So I'll pass the removeGuestAt
function we've just wrote
2:03
into the GuestList component,
so I'll give GuestList
2:08
the properly removeGuestAt and
pass it this.removeGuestAt.
2:13
Give that a save, then inside GuestList.js
I'll add the prop to the propTypes,
2:18
to removeGuestAt:
PropTypes.func.isRequired.
2:25
And this component holds
the index information,
2:31
so I'll pass the guest
component of function that
2:36
contains the index in its
closure via a handleRemoveProp
2:41
So this will return props.removeGuestat
and I'll pass it index.
2:50
Give that a save then inside Guest.js I'll
2:56
add the prop to its
propTypes handleRemove.
3:01
PropTypes.func.isRequired.
3:08
And finally, I need to bind a function
to the remove buttons click handler.
3:16
In the opening button tag I will
say onClick = props.handleRemove.
3:21
All right, also switch to the browser and
3:28
if I click to remove a guest, it works.
3:32
Great next let's get the pending
name submission feature working.
3:36
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