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

Pending Name Submission Feature

4:21 with Guil Hernandez and Joel Kraft

In this video, we'll create a ghost tile that shows the name as a user types into the form field. We'll first add a list item to the unordered list that holds the guests. Then we'll show it only when there is text in the form input.

This video doesn't have any notes.

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

    In this video, 0:00
    we'll create a ghost tile that shows the name as a user types into the form field. 0:01
    We'll first add a list item to the unordered list that holds the guests, 0:06
    then we'll show it only when there's text in the form input. 0:10
    I'll start by creating a new component, so I'll open the Guest component, 0:14
    which is similar to what we want and then save it as PendingGuest.js. 0:21
    In this new file, I'll replace all references to guest with 0:27
    PendingGuest And 0:32
    we won't need any elements in this component except for the name. 0:39
    So I'll remove all the buttons, the input and label. 0:43
    We also won't need any props, except a name, so 0:48
    I'll delete everything but name in the propTypes. 0:51
    Then I'll change this GuestName component back to a span element. 0:58
    I'll remove its props and give the list item a className of pending. 1:05
    That will pick up styles from the CSS. 1:12
    And I'll remove the import for GuestName at the top. 1:19
    The last thing we'll need to do is only render 1:27
    this element if there's text in the form field. 1:30
    So inside, I'll add an if statement, and check props for a pending guest property. 1:34
    So we'll say if(props.name). 1:39
    And if it exists, we should return this list item so that it renders. 1:46
    So inside we'll say return, The li. 1:57
    Otherwise, we should return null. 2:10
    Remember, empty strings evaluate to false in JavaScript, so 2:12
    that a simple check like this would work. 2:16
    After the if statement, we'll add return null. 2:19
    Now let's go to the guest list component by opening up GuestList.js. 2:24
    And here I'll import the new pending guest component at the top, 2:29
    import PendingGuest from PendingGuest. 2:34
    Then I'll place the PendingGuest component right after the opening URL tag. 2:40
    I'll pass in the PendingGuest property from the state as a name prop. 2:48
    So I'll pass the name prop props.pendingGuest. 2:54
    And I'll add this to the propTypes below, Say pendingGuest 3:01
    PropTypes.string.isRequired And 3:11
    finally in app.js, 3:20
    I'll pass in the PendingGuest from state into the GuestList component. 3:22
    So I'll scroll down to the GuestList component and 3:28
    give it a prop PendingGuest and pass it this.state.pendingGuest. 3:33
    All right, let's save this and have a look in the browser. 3:42
    When I start typing a name, you can see the PendingGuest component appears and 3:46
    it's picking up the styling for the pending class. 3:51
    Then when I hit Return, 3:55
    the tile appears to become a full fledged guest with controls. 3:57
    Awesome. 4:01
    So what's really happening here is the state's PendingGuest property is 4:02
    being cleared which makes that PendingGuest component disappear. 4:06
    At the same time it disappears, a new guest component is added. 4:10
    All right, now lets wire up the final feature for this app, the counter. 4:15
    And we'll do that in the next video. 4:19

    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