We've build our first subcomponent of the application, the GuestList component, and

it's successfully rendering itself with data from the state.

But, there's no way to interact with it,

more specifically there's no way to change the application state yet.

To do that, we'll create some event handlers in App.js and

hand them down to GuestList as props.

So first, let's extract the list item and

the GuestList component out to its own component.

Now I like to save a little time when I can, so in this case I'll just save this

GuestList component as a new file, then alter it from there to new component.

So I'll save it as Guest.js.

Then in this new file I'll select all the variables

named GuestList and delete the list at the end.

And Adam, I'm typing Ctrl+D to select and change them all at once.

So, this component will return list item so I'll delete the UL and map function.

And instead of guest.name and guest.isConfirmed,

we'll pass the data in onProps so I'll change guest to props.

Then I want to validate those two props, so,

I'll set propTypes for them down here in my propTypes.

I'll set name, name will be a string,

And isConfirmed will be a required Boolean.

Finally we don't need a key anymore since keeping track of different guests

is the responsibility of the parent component, guest list.

This component can be blissfully unaware of any other guest that may or

may not exist on this state.

So I'll delete the key and now I'll close this and

open up guest list again.

And first I'll import the new guest component at the top,

And I'll replace the list item returned by the map function with the guest component.

I'll keep the key, but I'll add a name prop,

and pass it guest.name and an isConfirmed prop,

which will get guest.isConfirmed.

I'll give this a save and nothing has changed,

which is just what we wanted to see.

So now we'll connect the confirmed boxes to effect the state of application.

First, let's review how events are handled and React.

Data always flows downward in a React app.

This means an ancestor state can be passed down to it's descendants through props.

But descendants can't past data back up.

Sometimes data needs to travel back to an ancestor though for

example a form field is a common example of a decadent that need to report it's

content up to the larger app.

To do that an ancestor must define a call back function and

pass it down to the decadent.

The function can accept data, like the text from an input and

add it to the ancestor state.

That function can then be bound to events on that child component,

sending data back to the ancestor every time the event occurs.

So, for example, when a text input element's on change event occurs,

meaning the user is typing into the field an ancestor's call back bound to

that event will fire passing the text up to the ancestor.

Let's set up a handler in App.js.

Below the state object I'll create a new method called toggleConfirmation.

Because confirmation can either be true or false.

We can just flip the value of the check box every time this handler runs,

so that means we won't need it to accept a value from the check box.

We can just take whatever value was stored and flip it to its opposite because there

are a number of guests, we'll need the index of the guest whose state to change.

I'll call it indexToChange.

And I'll also change the name of the function adding At at the end.

This is just a convention to help us remember this function takes the index of

the element toggle.

So in other words it will toggle the confirmation at specified index.

And now, it's just a matter of changing the state.

So I'll call this.setstate,

Passing in a new object that will become the state.

The property that we want to change is guests so

inside we'll add guests and it's going to be an array.

Now, we only want to change one member of the array though and leave the rest alone.

So we can use the map method to go through the existing guests array,

we'll say this.state.guests.map.

Passing it guest and index.

And we only want to make a change if the index matches.

So we'll type if (index === indexToChange

And we want to produce an object with the same name, but with the opposite value for

isConfirmed.

So in the return we'll add isConfirmed and

set it to !guest.isConfirmed.

Now we could just write the name property as well and

assign the current name value to it like this, guest.name, but

if we ever add more properties to this object for

any reason, we'd have to come, find this place again, and change it.

So we'll make our code more flexible, to use the object spread operator here.

So we'll replace the entire name property with ...guest.

You can learn more about the spread operator in the Teacher's Notes.

Basically, it just transfers the keys and values from one object to another.

Here the keys and

values from guest are placed in this new object we're constructing.

Because guest has an outdated value for

is confirmed though we'll need this second line to overwrite that key

with the new updated value which is the opposite of whatever it was.

This is a much more flexible way of creating a new object.

I recommend following this pattern for these kinds of changes to state in React.

Finally, if the index doesn't match, let's return the same object,

leaving it untouched so we'll write return guest.

Our handler is now complete.

The next step is to connect it to the form input so

checking it will fire the handler.

We'll do that in the next video.