1
00:00:00,000 --> 00:00:01,001
In this video,

2
00:00:01,001 --> 00:00:06,244
we'll create a ghost tile that shows the
name as a user types into the form field.

3
00:00:06,244 --> 00:00:10,886
We'll first add a list item to
the unordered list that holds the guests,

4
00:00:10,886 --> 00:00:14,860
then we'll show it only when
there's text in the form input.

5
00:00:14,860 --> 00:00:21,577
I'll start by creating a new component,
so I'll open the Guest component,

6
00:00:21,577 --> 00:00:27,692
which is similar to what we want and
then save it as PendingGuest.js.

7
00:00:27,692 --> 00:00:32,010
In this new file,
I'll replace all references to guest with

8
00:00:32,010 --> 00:00:39,770
PendingGuest And

9
00:00:39,770 --> 00:00:43,927
we won't need any elements in this
component except for the name.

10
00:00:43,927 --> 00:00:48,546
So I'll remove all the buttons,
the input and label.

11
00:00:48,546 --> 00:00:51,703
We also won't need any props,
except a name, so

12
00:00:51,703 --> 00:00:55,098
I'll delete everything but
name in the propTypes.

13
00:00:58,246 --> 00:01:05,626
Then I'll change this GuestName
component back to a span element.

14
00:01:05,626 --> 00:01:12,497
I'll remove its props and
give the list item a className of pending.

15
00:01:12,497 --> 00:01:14,624
That will pick up styles from the CSS.

16
00:01:19,602 --> 00:01:22,356
And I'll remove the import for
GuestName at the top.

17
00:01:27,412 --> 00:01:30,797
The last thing we'll
need to do is only render

18
00:01:30,797 --> 00:01:34,462
this element if there's
text in the form field.

19
00:01:34,462 --> 00:01:39,851
So inside, I'll add an if statement, and
check props for a pending guest property.

20
00:01:39,851 --> 00:01:46,701
So we'll say if(props.name).

21
00:01:46,701 --> 00:01:52,503
And if it exists, we should return
this list item so that it renders.

22
00:01:57,239 --> 00:02:04,839
So inside we'll say return, The li.

23
00:02:10,571 --> 00:02:12,261
Otherwise, we should return null.

24
00:02:12,261 --> 00:02:16,585
Remember, empty strings evaluate
to false in JavaScript, so

25
00:02:16,585 --> 00:02:19,444
that a simple check like this would work.

26
00:02:19,444 --> 00:02:24,353
After the if statement,
we'll add return null.

27
00:02:24,353 --> 00:02:29,172
Now let's go to the guest list
component by opening up GuestList.js.

28
00:02:29,172 --> 00:02:34,421
And here I'll import the new
pending guest component at the top,

29
00:02:34,421 --> 00:02:37,868
import PendingGuest from PendingGuest.

30
00:02:40,238 --> 00:02:45,355
Then I'll place the PendingGuest component
right after the opening URL tag.

31
00:02:48,819 --> 00:02:54,872
I'll pass in the PendingGuest property
from the state as a name prop.

32
00:02:54,872 --> 00:02:59,710
So I'll pass the name
prop props.pendingGuest.

33
00:03:01,458 --> 00:03:07,892
And I'll add this to the propTypes below,
Say pendingGuest

34
00:03:11,478 --> 00:03:20,816
PropTypes.string.isRequired And

35
00:03:20,816 --> 00:03:22,544
finally in app.js,

36
00:03:22,544 --> 00:03:28,503
I'll pass in the PendingGuest from
state into the GuestList component.

37
00:03:28,503 --> 00:03:33,168
So I'll scroll down to
the GuestList component and

38
00:03:33,168 --> 00:03:39,580
give it a prop PendingGuest and
pass it this.state.pendingGuest.

39
00:03:42,437 --> 00:03:46,339
All right, let's save this and
have a look in the browser.

40
00:03:46,339 --> 00:03:51,903
When I start typing a name, you can see
the PendingGuest component appears and

41
00:03:51,903 --> 00:03:55,624
it's picking up the styling for
the pending class.

42
00:03:55,624 --> 00:03:57,265
Then when I hit Return,

43
00:03:57,265 --> 00:04:01,624
the tile appears to become a full
fledged guest with controls.

44
00:04:01,624 --> 00:04:02,190
Awesome.

45
00:04:02,190 --> 00:04:06,714
So what's really happening here is
the state's PendingGuest property is

46
00:04:06,714 --> 00:04:10,891
being cleared which makes that
PendingGuest component disappear.

47
00:04:10,891 --> 00:04:15,230
At the same time it disappears,
a new guest component is added.

48
00:04:15,230 --> 00:04:19,723
All right, now lets wire up the final
feature for this app, the counter.

49
00:04:19,723 --> 00:04:21,969
And we'll do that in the next video.