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's text in the form input.

I'll start by creating a new component, so I'll open the Guest component,

which is similar to what we want and then save it as PendingGuest.js.

In this new file, I'll replace all references to guest with

PendingGuest And

we won't need any elements in this component except for the name.

So I'll remove all the buttons, the input and label.

We also won't need any props, except a name, so

I'll delete everything but name in the propTypes.

Then I'll change this GuestName component back to a span element.

I'll remove its props and give the list item a className of pending.

That will pick up styles from the CSS.

And I'll remove the import for GuestName at the top.

The last thing we'll need to do is only render

this element if there's text in the form field.

So inside, I'll add an if statement, and check props for a pending guest property.

So we'll say if(props.name).

And if it exists, we should return this list item so that it renders.

So inside we'll say return, The li.

Otherwise, we should return null.

Remember, empty strings evaluate to false in JavaScript, so

that a simple check like this would work.

After the if statement, we'll add return null.

Now let's go to the guest list component by opening up GuestList.js.

And here I'll import the new pending guest component at the top,

import PendingGuest from PendingGuest.

Then I'll place the PendingGuest component right after the opening URL tag.

I'll pass in the PendingGuest property from the state as a name prop.

So I'll pass the name prop props.pendingGuest.

And I'll add this to the propTypes below, Say pendingGuest

PropTypes.string.isRequired And

finally in app.js,

I'll pass in the PendingGuest from state into the GuestList component.

So I'll scroll down to the GuestList component and

give it a prop PendingGuest and pass it this.state.pendingGuest.

All right, let's save this and have a look in the browser.

When I start typing a name, you can see the PendingGuest component appears and

it's picking up the styling for the pending class.

Then when I hit Return,

the tile appears to become a full fledged guest with controls.

Awesome.

So what's really happening here is the state's PendingGuest property is

being cleared which makes that PendingGuest component disappear.

At the same time it disappears, a new guest component is added.

All right, now lets wire up the final feature for this app, the counter.

And we'll do that in the next video.