Preview
Video Player
00:00
00:00
Initialize the State
4:06We know how components will nest inside of one another in our app, and where the state will live. In this video, we'll start writing the initial state object for the App component.
We know how components will nest
inside of one another in our app, and
0:00
where the state will live.
0:04
Now, we'll start writing the initial
state object for the app component.
0:06
I'll open the main app component
in the text editor, and
0:10
I'll declare a state
object inside a class.
0:14
You might have seen state created
inside a constructor function before.
0:18
Well, create-react-app
lets us simplify our code,
0:23
letting us use property initializers and
classes like this.
0:25
Check the teacher's notes for more
information if you're curious about that.
0:29
Well, we know we'll need to track guests,
right?
0:32
After all, this app is for
keeping track of guests.
0:35
So in a way, it seems like the perfect
way to store lists of guests.
0:38
I'll create a guest property and
assign it to an empty array.
0:42
And every guest we put in the array
will become a tile on the page.
0:47
Each tile will store a name and
whether or not the guest has confirmed.
0:51
So to track that information,
an object seems appropriate.
0:56
One key can refer to a name string.
1:01
I'll set this one to Treasure.
1:04
And the other key can
be called isConfirmed.
1:06
And isConfirmed can point to a boolean.
1:11
This one will be false by default.
1:13
Now we're just planning right now, and we
might need to change some of this later.
1:17
But this will hopefully get us
started in the right direction.
1:21
I'll just add one more name
by copying this object,
1:23
adding a comma, pasting a new one below.
1:28
I'll change this name to Nic and mark it
confirmed by setting isConfirmed to true.
1:32
The app will also need to track the number
of guests in the counter component.
1:39
Now it might be tempting to put
the count in the state object too,
1:44
but this isn't really a good idea.
1:49
And the reason for
1:51
this is because that guest count can
be derived from the guest array, right?
1:52
Because it's equal to
the guest array's length.
1:56
Having one piece of state that depends on
another piece of state is something you
1:59
wanna avoid and react.
2:04
It's important to store only
the state you need, and compute or
2:05
derive anything else that you
can from that state, as needed.
2:09
This way you can keep it dry.
2:12
While we're thinking about it,
2:14
let's write a method to handle
getting the total count.
2:15
So right below the state object
I'll create a method on this class
2:18
called getTotalInvited, And
2:24
this method should just return
the length of the guests array.
2:29
We'll say this.state.guests.length.
2:33
And now we have a method to find
the current total of invited guests.
2:39
We still need to know
the total of confirmed and
2:44
the total of unconfirmed though.
2:48
To get the number of confirmed guests,
2:50
we could write another method to loop
through each guest and the guest array and
2:52
count the number of times
confirmed is set to true.
2:57
And we'll do that together
in a later video.
3:00
For now feel free to think about way
to write this method if you want.
3:03
Once we have the number of confirmed
guests, we'll just subtract it from
3:07
the total and divide it to get
the number of unconfirmed guests.
3:11
So I'll write a couple of comments
in the app just as placeholders for
3:15
when we're ready to think
more about the counter.
3:20
First I'll write
a getAttendingGuests method.
3:23
And right below getUnconfirmedGuests.
3:32
And this should be enough to
get started with the state.
3:39
Now it can be hard to think of what state
you'll need before you see the components,
3:42
and start trying to
implement their behavior.
3:47
Trying to think of all the state you'll
need ahead of time can really help though.
3:49
And you'll get better at this
the more apps you build.
3:53
So these are the parts that
we know we'll need so far.
3:55
Well, great job setting up.
3:59
In the next video we'll start building
the component that will render
4:01
the guest tiles.
4:04
See you there.
4:05