- Building the GuestList Component 6:12
- Writing a Handler to Confirm Guests 7:46
- Connecting the Confirm Guests Handler 4:27
- Creating Components Review 6 questions
- Toggling Edit State for Guests 8:31
- Changing Guest Name in State 6:11
- Filtering Guests 6:06
- Filtering and Changing State Review 5 questions
- Adding Guests to the List 5:44
- Removing Names From the List 3:42
- Pending Name Submission Feature 4:21
- Creating the Counter 7:14
- Building the Application Review 5 questions
Preview
Video Player
00:00
00:00
Pending Name Submission Feature
4:21In 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.
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