We've restructured our state to be entirely in our main app component.

But we've lost our functionality of the counter,

the counter buttons no longer modify the score.

The buttons in the counter need to alter a piece that state that lives in the app

component.

Now, if data flows down in React, how does a child component like

counter get information back up to its ancestor component?

Instead of passing state to a child component,

the parent can pass down a callback function.

The callback will allow you to communicate events and changes in your data upwards,

while data continues to flow downwards.

So next, we'll refactor the counter's event handlers, and implement new

props in the player and counter components that will act as callback functions.

In order to design how data flows upward through our component tree,

we need to think about each component and its responsibilities.

Counter, for example, has a score passed to it by its parent,

the player component and player gets to score from its parent, the app component.

The app component maintains the score state and the buttons intended to

change the score are two components deep from app in the counter.

Since data in React flows downward,

a child component has no way to directly communicate to its parent.

But React allows us to use props that are callback functions to communicate data

upstream, from a child to a parent.

For example, we can write event handlers that manipulate state, and

pass them down to component as callback functions.

When a child wants to indicate that the application state should change,

like click a button to change the score, it will execute the callback function and

the parent will know what to do to update the data.

In fact, we've already implemented a simple version of this.

We wrote the handleRemovePlayer function in the app component which gets

called down in the player component when the user clicks the delete button.

The player component has access to the function written in the app class and

can pass data up to it via the callback function passed as a prop.

So now we're going to move the counters event handler up to the up component.

We'll refactor the two functions into one handleScoreChange function that

changes the score state based on the data passed to it.

First I'll uncomment the increment score function, cut it out of counter.js and

paste it inside the app component just above the handle remove player function.

You can delete the decrementScore function in the counter since we just need one

function for this.

Back in app.js I'll change the name of the function to handleScore change.

And instead of increasing or decreasing the score state by specifying +1 or

minus 1, the function will accept an argument that specifies the change or

delta and score.

I'll pass handleScoreChange, the parameter, delta.

And I'm choosing the name delta because a delta is the variation of a function,

in our case the number the score should be changed by.

You can give this parameter any name you want.

For now, I'll comment out the setState method, and

console.log the value of delta.

Next, we need to pass the handleScoreChange function down to

the counter component with props.

We'll first pass it to the player component,

then supply to the counter component.

A function will then be called inside the counter using an onClick event.

So in the map function,

let's give the player component a new prop named changeScore.

Then pass the handleScoreChange function with this.handleScoreChange.

This callback is going to run at a later time through some interaction with a child

component.

So in the file, Player.js,

we will pass the function down to the counter component using props.

In the return, let's give the counter component a prop named changeScore and

pass it the function with props.changeScore.

So now the function is available to be called, or invoked,

from inside the counter component.

When a button in the counter is clicked,

the function will be executed passing in the number the score should be changed by.

In Counter.js, let's once again provide an onClick event to each button.

I'll pass onClick an anonymous function that calls props.changeScore.

Then pass it the delta argument, which is the number to change the score by.

For the minus button we'll pass -1.

We can do the same for the + ,

and make it changed by positive 1.

So now, the handleScoreChange function written in the app

component knows how to change the score.

If we run our code, and open up the console,

clicking a + button, logs a 1, and each- button logs a -1.