Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll

React by Example

Preview

Start a free Courses trial
to watch this video

Sign up for Treehouse

Removing Names From the List

3:42 with Guil Hernandez and Joel Kraft

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 up

    Related 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 up

      You need to sign up for Treehouse in order to set up Workspace

      Sign up