Creating the Counter

For the last feature of this app, 0:00 let's make the counter component update as the state of the app change. 0:02 The first step I wanna take is to create a counter component, 0:06 which will return this table. 0:10 So I'll create a new file and call it counter.js, 0:12 At the top I'll import React from 'react' and 0:19 import PropTypes from 'prop-types', 0:26 Then I'll declare a simple counter function, const Counter pass it props. 0:36 And I'll export Counter at the bottom. 0:46 I'll save that and switch back to App.js. 0:53 Up top, I'll import the Counter component. 0:58 Import Counter from Counter. 1:04 And then I'll scroll down and cut out the table. 1:12 And replace it with a counter component. 1:19 Over in counter.js I'll paste the table inside a new function. 1:25 And now we can replace each of these numerals with corresponding prop values. 1:35 So I'll change the first one to props.numberAttending. 1:41 I'll go ahead and copy this, and change the second one to props.numberUnconfirmed. 1:54 And lastly, I'll make the third one props.totalInvited 2:05 And to finish this component I'll declare it's propTypes at the bottom. 2:14 We'll say Counter.propTypes, = object. 2:19 First we'll say numberAttending should be a number. 2:30 So we'll say PropTypes.number, and 2:36 we'll make this optional by not adding isRequired. 2:40 Next, numberUnconfirmed. 2:47 And finally, totalInvited. 2:53 Over in app.js, let's start passing those totals into the counter. 2:59 As you recall we already wrote the function that totals all the invited 3:04 guests, getTotalInvited. 3:08 So at the top of the render method, I'll call getTotalInvited, 3:10 And assign it to a constant named totalInvited. 3:17 Then I'll scroll down and 3:24 pass it to the counter component via the totalIvited prop. 3:26 If I save this and look in the browser, 3:35 you can see the total is now getting updated when I remove names for example. 3:37 So I'm calling getTotalInvited in the render method because 3:42 I want the count to update whenever the app component re-renders. 3:47 So now to get the attending guess total I'll need to count the number of guests 3:53 that are confirmed. 3:57 And I can do this using the reduce array method. 3:58 Reduce can be useful for 4:01 when you want to end up with some value other than an array. 4:03 In this case we want a single number. 4:06 So I'll go up to the getAttendingGuests method we defined earlier and 4:09 un-comment it. 4:15 And here, 4:18 I'll return the result of calling reduce on the guest array and state. 4:19 We'll say this.state .guests .reduce.reduce, 4:25 And reduce takes an accumulator and the current value. 4:35 So for the accumulator, I want a total and 4:40 the current value will be a guest and I'll initialize total to be 0. 4:44 For each guest I want to check if isConfirmed is true and 4:53 add 1 to the total if so. 4:58 Otherwise I want to return the total unchanged, and 5:00 I can do this with a ternary expression. 5:03 So if guest.isConfirmed is true, 5:10 add one to the total + 1, 5:15 otherwise return the total unchanged. 5:19 And I'm going to delete this getUnconfirmedGuests method and 5:28 I'll show you why in just a moment. 5:32 So next in the render method I'll create a constant, Called numberAttending, 5:34 and I'll set it equal to the output of the getAttendingGuests method. 5:42 So now, notice that, to get the total number of unconfirmed guests, 5:50 I just need to subtract the number attending from the total. 5:55 So I'll create the constant numberUnconfirmed, 5:59 and assign it to totalInvited- numberAttending. 6:04 And finally we'll pass those into the counter. 6:13 First numberAttending = numberAttending, 6:18 and numberUnconfirmed = numberUnconfirmed. 6:22 All right saving that, and previewing in the browser. 6:30 You can see that the counter now works. 6:35 And if I check and uncheck confirmed boxes for example, 6:40 you can see the totals are changing to the correct values. 6:44 And if I remove a guest the total decreases by one. 6:48 Great work, we have a fully functioning RSVP app built in React. 7:01 We can still improve on the code we wrote thought. 7:05 So in the next stage we'll look at the steps we can take to make this app more 7:07 concise and maintainable, see you there. 7:11