We 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
You need to sign up for Treehouse in order to download course files.Sign up