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 items array in state.
Treehouse Courses & Workshops
Related Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign upRelated Discussions
Have questions about this video? Start a discussion with the community and Treehouse staff.
Sign up
All right, let's integrate the delete
item functionality into our application.
0:00
Within the app component, we'll create a
new arrow function named handleRemoveItem.
0:04
This function will take an id parameter,
0:11
which will specify the item
to be removed from the state.
0:14
Then call the setItems function
we received from useState.
0:18
Remember, it's important not to
directly modify or mutate the state.
0:23
Instead, we'll construct
a new array that no longer
0:28
contains the item object
we want to remove.
0:33
There are several ways to achieve this,
but a common and
0:37
reliable way is with the filter
array iteration method.
0:40
Filter is used to remove
elements from an array
0:44
while leaving the original
array untouched.
0:48
We'll filter it through the items
array in state with items.filter.
0:52
However, this is updating state
based on the previous state,
0:58
which we want to avoid.
1:02
Like we did earlier,
let's have setItems take a callback
1:04
function with the parameter prevItems.
1:08
This callback will generate the updated
state using prevItems.filter.
1:12
Similar to the map method, the filter
method also requires a callback function.
1:17
The first parameter of the callback
represents the current item being
1:24
processed in the array.
1:29
Let's call it i for item.
1:30
Our goal is to return all the item
objects in the state except for
1:32
the one we intend to remove.
1:38
We can achieve this by
utilizing the item's id.
1:41
We'll return the item
only if its id is not
1:44
strictly equal to the id
we wish to remove.
1:49
So when handleRemoveItem is invoked, we
iterate through the items array in state.
1:53
And filter out only the item
object whose id does not equal
1:59
the id passed into the handleRemoveItem.
2:04
The result is a refined items array
excluding the item we want to remove.
2:08
The function will eventually be
called in the item component when
2:13
the user clicks a delete button.
2:18
Now, if the item component
is a child of app,
2:21
how will it have access to the function
written in the app component?
2:24
Through props.
2:29
Props is what React uses to pass
data from component to component.
2:30
You can pass functions through props,
even data from state.
2:35
So next,
2:39
we need to supply the handleRemoveItem
function to the item component.
2:40
In the map function, let's give the item
component a new prop named removeItem.
2:46
Then we'll pass the function down to
the player with handleRemoveItem.
2:52
We also need to pass
the item.id as a prop.
2:59
That way,
3:03
we can use it to let the function know
which specific item should be removed.
3:04
So let's include a prop named id and
pass it item.id.
3:09
So handleRemoveItem is gonna be
called at a later time through
3:17
some interaction with the item component.
3:21
In this case, when a user clicks
the delete button, this then causes
3:24
the item state that's maintained in
the parent app component to update.
3:29
If you have a look at the app in React
DevTools, you'll notice that each item
3:34
component has a removeItem prop,
and its value is a function.
3:40
This means that the item
component now has access to
3:45
the function defined in
its parent app component.
3:49
To demonstrate this in the item component,
3:53
I'll console.log, props.removeItem.
3:57
In the console, you'll see that it
logs the handleRemoveItem function.
4:02
So the item component is now able to send
data back to its parent app component
4:07
through the callback function that's
being passed to it through props.
4:12
Good, within the item component,
4:17
this delete button is going to
trigger the change in the item state.
4:19
For this reason, we'll assign
an onClick event to the button.
4:24
Remember earlier when we passed
a function to an onClick event,
4:29
we left out the parentheses so that React
calls it when the onClick event happens.
4:33
But this time, we need to provide our
props.removeItem and id as a parameter.
4:39
So we need to include the parentheses.
4:45
To get React to call our
props at removeItem function,
4:48
once the button is clicked,
we need to pass onClick,
4:52
an anonymous function,
using an arrow function.
4:55
This anonymous function will essentially
call the function pass to it through
4:59
props.
5:04
Finally, we need to pass
the item id to the function so
5:06
that it knows which item
to remove on click.
5:10
We're passing the id as a prop, so
we can access it with props.id.
5:13
So now, the handleRemoveItem function
written in the app component gets
5:20
the information it needs to
remove a player from state.
5:25
Let's try it out.
5:29
Over in the browser, clicking the delete
button removes that item from the UI,
5:30
which also causes the total item
count to update accordingly.
5:36
In React DevTools, you can see that
an item object is removed from
5:41
the application state each time
I click the delete button.
5:45
You need to sign up for Treehouse in order to download course files.
Sign upYou need to sign up for Treehouse in order to set up Workspace
Sign up