Heads up! To view this whole video, sign in with your Courses account or enroll in your free 7-day trial. Sign In Enroll
Preview
Start a free Courses trial
to watch this video
In this video, we'll use the filter() array iteration method to remove an object from the players array in state.
Button snippet
<button className="remove-player">✖</button>
Resources
Related Content
All right, now let's create
the delete player feature.
0:00
Inside the App class, let's write a new
error function called handleRemovePlayer,
0:03
The function takes an id parameter for
the player to remove from state.
0:13
Inside the function, add this.setState and
0:18
pass it an object containing the property
to update, in this case, players.
0:22
Remember, we should never modify or
mutate state directly.
0:28
In order to remove a player
from the players array and
0:34
state, we need to produce a new array
0:36
that no longer contains the player
object we want to remove.
0:38
There are several ways we could do this,
a common and
0:42
reliable way is with the filter
array iteration method.
0:44
Filter is used to remove elements from
an array without affecting the original
0:47
array.
0:52
So we could filter through
the player's array and
0:52
state with this.state.players.filter.
0:56
But we're updating the player's
array based on the previous state.
0:59
So we wanna avoid updating
the player state directly,
1:05
by accessing this.state.players.
1:09
So like we did earlier,
1:11
let's have set state take a callback
function with the parameter prevState.
1:13
The function needs to return
1:19
the updated player state.
1:24
And we'll produce the updated state
1:32
with prevState.players.filter.
1:37
Like the map method, the filter
method takes a callback function.
1:42
The first parameter of the callback
represents the current
1:46
item being processed in the array.
1:49
I'll name it p for player.
1:51
Then we need to return
all player objects and
1:53
state except for
the one we want to remove.
1:56
The way we do that is using the player id.
2:00
So we'll return p.id not
strictly equal to id.
2:04
So when handleRemovePlayer is invoked,
we iterate through
2:08
the player's array and state and
filter out only the player object
2:12
whose id does not equal the id
passed into handleRemovePlayer.
2:18
This function will eventually be called
2:23
in the Player component when
the user clicks the delete button.
2:26
Now, if the Player component
is a child of App,
2:30
how will it have access to
the function written in the App class?
2:33
Through props, props is what React uses
to pass data from component to component.
2:38
You can pass functions through props,
even data from state.
2:44
So next,
2:47
we need to supply the handleRemovePlayer
function to the Player component.
2:48
So in the map function,
2:53
let's give the player component
a new prop named removePlayer.
2:55
Then we'll pass the function down to
player with this.handleRemovePlayer.
3:01
And we also need to pass
the player id as a prop,
3:07
that way we can use it to let
the function know which player to remove.
3:12
So let's add a prop named id and
pass it player.id.
3:19
So handleRemovePlayer is
going to be called at a later
3:22
time through some interaction
with the Player component.
3:27
In this case,
when a user clicks a delete button and
3:33
it's going to change the player state that
is maintained in the parent App component.
3:37
If you have a look at the app in
React Dev tools, you should see that each
3:44
Player component has a removePlayer prop,
and its value is a function.
3:49
This means that the Player component
now has access to the function and
3:54
state defined in its parent App component.
3:59
To demonstrate,
I'll scroll up to the player function in
4:06
concole.log props.removePlayer.
4:10
In the console, you'll see that it
logs the handleRemovePlayer function.
4:15
So player is now able to send data
back to it's parent App component
4:19
through the call back function that's
being passed to it through props.
4:23
Good, inside the Player component,
4:26
a delete button is going to trigger
the change in the player state.
4:28
So let's create the button now, inside
the span tags, add a button element.
4:32
You can copy this element along with
the close icon from the teacher's notes
4:39
with this video.
4:43
The button will get
the class remove-player for
4:44
styling purposes, and an onClick event.
4:50
Then, to call the handle remove player
function when the button is clicked,
4:55
I'll pass onClick, an anonymous function,
using an arrow function.
5:01
That returns a call to the function
which is being passed in through props
5:06
with props.removePlayer.
5:11
Finally, we need to pass
the player id to the function so
5:14
that it knows which
player to remove onClick.
5:17
We'e passing the id as a prop, so
we can access it with props.id.
5:19
So now, the handleRemovePlayer function,
written in the App component,
5:26
gets all the information it needs to
remove a player from state, let's try it.
5:30
Over in the browser,
click the delete icon,
5:35
that player is removed from the UI and
the total player count updates correctly.
5:38
And in React Dev tools, you can see
that a player object is removed
5:44
from the application state each
time I click the delete button.
5:48
In this course, we built the basic
functionality of the scoreboard.
6:00
For now, we're able to add players
manually in the initial app state.
6:04
We can remove players, modify scores and
6:08
see the total number of
players in our game.
6:11
You have the foundational
knowledge to begin building and
6:13
contributing to all sorts
of React applications.
6:16
But there's a whole lot more
to learn about in React.
6:19
In a follow up course, you'll build a more
advanced version of the scoreboard app
6:22
that will introduce new key concepts and
features of React and best practices for
6:26
building and working with components.
6:31
You'll find the link to the course along
with other helpful React courses and
6:32
workshops in the teachers
notes with this video.
6:36
Remember, we're here to help, so
6:38
if you have questions about
anything covered in this course,
6:40
feel free to reach out to the Treehouse
staff or other students in the community.
6:43
Thanks, everyone, and happy coding.
6:47
You need to sign up for Treehouse in order to download course files.
Sign up