How To Delete An Item From An Array In React

How To Delete An Item From An Array In React

In this react tutorial we’ll review a few things and then look at how to delete an item from an array. The number of items in the array determines how many item components are displayed on the page. We want to be able to click a button on a specific item, and have React automatically remove it from the page. But first, let’s review a few key concepts in React.


Props vs State in React

In the <Item/> component we are using a value stored in the props object to initialize the state. One thing to keep in mind is what the difference is between props and state. They both hold data, but what is the difference? The props object is used to give data to a component. State on the other hand can be though of as private data. It is local and only accessible in that specific component. This means other components can not directly access the state of a given component. So as we can see in <Items/>, we set some attributes on the <Item/> element.
react set attribute prop

Now, in the </Item> component, we can accept the data carried by the props object and use it to initialize the state of the <Item/> component!
react initialize state using props

So we can see that each component has its own state which is local and private to themselves, but that we can also share data to another component by using props. In fact, some components might not even have any state at all, but still accept data via props.


Props are read only

Another key point regarding props is that it is read only. If you try to break this rule by doing something like this.

You will encounter an error:

TypeError: Cannot assign to read only property ‘value’ of object ‘#<Object>’

So props is input to a component. You can not modify values stored in props, only read it. This is why the pattern you will see is reading data from props and assigning it to the state. Then you can modify the value stored in state as needed.


Raising And Handling Events

Now we’re going to see how to delete a component from the page by raising and handling an event. First off, let’s add that button in the markup.


item.jsx

There we go, now we have a button to delete an item on each item rendered.
react delete button


React Key Concept

The component that owns the state, should be the one modifying it.

The delete button exists on the <Item/> component. However the state which holds the list of <Item/>’s on the page is in the component. Therefore, if we want to modify that state (remove an item from the array), it should be done in that component itself. How do we do that? By raising an event, then handling that event. Let’s see a diagram.
react raise event handle event

We can make the Item component raise an event called onDelete and then in the Items component, we can handle that raised event with a handleDelete() method.


Passing An Event Handler Using Props

This is a pretty cool concept. We are going to create the event handler in <Items/> and then pass a reference to it via props to <Item/>. First, we can define a simple handleDelete() function.

items.jsx

Now, since we have passed a reference via props, we can access the reference to that function in <Item/> like so.
item.jsx

Clicking the Delete button shows that the event handler is in fact working. We’re only outputting an alert right now, but in a minute we’ll remove an item from the list of items using the filter function.

So when you have this type of scenario, it is the Child that raises the event and the Parent handles the event.


Deleting An Item With filter()

In the child component, we need to pass the id of the item we want to delete to the parent. Otherwise, React will have no idea which item to delete. As we reviewed before, here is the way to pass an argument using an arrow function.

item.jsx

Now in the parent component, we need to update the handleDelete() function to accept that id as a parameter. In addition, we need to use the filter function to create a new array of items which does not contain the item which was clicked. Then we have to call the setState() function to update the state.

items.jsx

Now if we click the delete button for a given item, it is deleted from the page!


A cleaner way to pass props

When passing more than one prop, you can clean up your code by using an object as the prop instead.

So instead of having an individual attribute for each prop like in this code:

We can just pass the object itself like so:

This means you need to also update item.jsx to reference props using this.props.item.value instead of this.props.value.

Finally, let’s just test out the increment and delete buttons to make sure everything is still working great.

Stack Overflow has a good discussion about this:

When using React, you should never mutate the state directly. If an object (or Array, which is an object too) is changed, you should create a new copy.

Others have suggested using Array.prototype.splice(), but that method mutates the Array, so it’s better not to use splice() with React.

Easiest to use Array.prototype.filter() to create a new array.


How To Delete An Item From An Array In React Summary

To delete an item from the page in React, you need to take a few steps. In our example we first had to deal with raising and handling events between child and parent components. Then we saw that when handling the event in the parent, we used the filter function to create a new array of items that did not include the one that was clicked. Lastly, we use the setState() function to override the existing state with the new state which no longer had the item which was clicked.