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