For the last feature of this app,

let's make the counter component update as the state of the app change.

The first step I wanna take is to create a counter component,

which will return this table.

So I'll create a new file and call it counter.js,

At the top I'll import React from 'react' and

import PropTypes from 'prop-types',

Then I'll declare a simple counter function, const Counter pass it props.

And I'll export Counter at the bottom.

I'll save that and switch back to App.js.

Up top, I'll import the Counter component.

Import Counter from Counter.

And then I'll scroll down and cut out the table.

And replace it with a counter component.

Over in counter.js I'll paste the table inside a new function.

And now we can replace each of these numerals with corresponding prop values.

So I'll change the first one to props.numberAttending.

I'll go ahead and copy this, and change the second one to props.numberUnconfirmed.

And lastly, I'll make the third one props.totalInvited

And to finish this component I'll declare it's propTypes at the bottom.

We'll say Counter.propTypes, = object.

First we'll say numberAttending should be a number.

So we'll say PropTypes.number, and

we'll make this optional by not adding isRequired.

Next, numberUnconfirmed.

And finally, totalInvited.

Over in app.js, let's start passing those totals into the counter.

As you recall we already wrote the function that totals all the invited

guests, getTotalInvited.

So at the top of the render method, I'll call getTotalInvited,

And assign it to a constant named totalInvited.

Then I'll scroll down and

pass it to the counter component via the totalIvited prop.

If I save this and look in the browser,

you can see the total is now getting updated when I remove names for example.

So I'm calling getTotalInvited in the render method because

I want the count to update whenever the app component re-renders.

So now to get the attending guess total I'll need to count the number of guests

that are confirmed.

And I can do this using the reduce array method.

Reduce can be useful for

when you want to end up with some value other than an array.

In this case we want a single number.

So I'll go up to the getAttendingGuests method we defined earlier and

un-comment it.

And here,

I'll return the result of calling reduce on the guest array and state.

We'll say this.state .guests .reduce.reduce,

And reduce takes an accumulator and the current value.

So for the accumulator, I want a total and

the current value will be a guest and I'll initialize total to be 0.

For each guest I want to check if isConfirmed is true and

add 1 to the total if so.

Otherwise I want to return the total unchanged, and

I can do this with a ternary expression.

So if guest.isConfirmed is true,

add one to the total + 1,

otherwise return the total unchanged.

And I'm going to delete this getUnconfirmedGuests method and

I'll show you why in just a moment.

So next in the render method I'll create a constant, Called numberAttending,

and I'll set it equal to the output of the getAttendingGuests method.

So now, notice that, to get the total number of unconfirmed guests,

I just need to subtract the number attending from the total.

So I'll create the constant numberUnconfirmed,

and assign it to totalInvited- numberAttending.

And finally we'll pass those into the counter.

First numberAttending = numberAttending,

and numberUnconfirmed = numberUnconfirmed.

All right saving that, and previewing in the browser.

You can see that the counter now works.

And if I check and uncheck confirmed boxes for example,

you can see the totals are changing to the correct values.

And if I remove a guest the total decreases by one.

Great work, we have a fully functioning RSVP app built in React.

We can still improve on the code we wrote thought.

So in the next stage we'll look at the steps we can take to make this app more

concise and maintainable, see you there.