All right, now let's create the delete player feature.

Inside the App class, let's write a new error function called handleRemovePlayer,

The function takes an id parameter for the player to remove from state.

Inside the function, add this.setState and

pass it an object containing the property to update, in this case, players.

Remember, we should never modify or mutate state directly.

In order to remove a player from the players array and

state, we need to produce a new array

that no longer contains the player object we want to remove.

There are several ways we could do this, a common and

reliable way is with the filter array iteration method.

Filter is used to remove elements from an array without affecting the original

array.

So we could filter through the player's array and

state with this.state.players.filter.

But we're updating the player's array based on the previous state.

So we wanna avoid updating the player state directly,

by accessing this.state.players.

So like we did earlier,

let's have set state take a callback function with the parameter prevState.

The function needs to return

the updated player state.

And we'll produce the updated state

with prevState.players.filter.

Like the map method, the filter method takes a callback function.

The first parameter of the callback represents the current

item being processed in the array.

I'll name it p for player.

Then we need to return all player objects and

state except for the one we want to remove.

The way we do that is using the player id.

So we'll return p.id not strictly equal to id.

So when handleRemovePlayer is invoked, we iterate through

the player's array and state and filter out only the player object

whose id does not equal the id passed into handleRemovePlayer.

This function will eventually be called

in the Player component when the user clicks the delete button.

Now, if the Player component is a child of App,

how will it have access to the function written in the App class?

Through props, props is what React uses to pass data from component to component.

You can pass functions through props, even data from state.

So next,

we need to supply the handleRemovePlayer function to the Player component.

So in the map function,

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

Then we'll pass the function down to player with this.handleRemovePlayer.

And we also need to pass the player id as a prop,

that way we can use it to let the function know which player to remove.

So let's add a prop named id and pass it player.id.

So handleRemovePlayer is going to be called at a later

time through some interaction with the Player component.

In this case, when a user clicks a delete button and

it's going to change the player state that is maintained in the parent App component.

If you have a look at the app in React Dev tools, you should see that each

Player component has a removePlayer prop, and its value is a function.

This means that the Player component now has access to the function and

state defined in its parent App component.

To demonstrate, I'll scroll up to the player function in

concole.log props.removePlayer.

In the console, you'll see that it logs the handleRemovePlayer function.

So player is now able to send data back to it's parent App component

through the call back function that's being passed to it through props.

Good, inside the Player component,

a delete button is going to trigger the change in the player state.

So let's create the button now, inside the span tags, add a button element.

You can copy this element along with the close icon from the teacher's notes

with this video.

The button will get the class remove-player for

styling purposes, and an onClick event.

Then, to call the handle remove player function when the button is clicked,

I'll pass onClick, an anonymous function, using an arrow function.

That returns a call to the function which is being passed in through props

with props.removePlayer.

Finally, we need to pass the player id to the function so

that it knows which player to remove onClick.

We'e passing the id as a prop, so we can access it with props.id.

So now, the handleRemovePlayer function, written in the App component,

gets all the information it needs to remove a player from state, let's try it.

Over in the browser, click the delete icon,

that player is removed from the UI and the total player count updates correctly.

And in React Dev tools, you can see that a player object is removed

from the application state each time I click the delete button.

In this course, we built the basic functionality of the scoreboard.

For now, we're able to add players manually in the initial app state.

We can remove players, modify scores and

see the total number of players in our game.

You have the foundational knowledge to begin building and

contributing to all sorts of React applications.

But there's a whole lot more to learn about in React.

In a follow up course, you'll build a more advanced version of the scoreboard app

that will introduce new key concepts and features of React and best practices for

building and working with components.

You'll find the link to the course along with other helpful React courses and

workshops in the teachers notes with this video.

Remember, we're here to help, so

if you have questions about anything covered in this course,

feel free to reach out to the Treehouse staff or other students in the community.

Thanks, everyone, and happy coding.