Pending Name Submission Feature

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