Table of Contents
Have you started working on React recently and wanted to know the right way to delete an item from an array stored in the useState hook? You are at the right place!
Setting up the project
First, let's create a react project using the following command:
1npx create-react-app react-delete-usestate
Add the following styles to index.css
:
1body {2 display: flex;3 justify-content: center;4}56ul {7 list-style-type: none;8 padding: 0;9}10li {11 padding: 6px 0;12 display: flex;13 justify-content: space-between;14}1516button {17 margin-left: 20px;18}
Now, create an array of fruits, store them in useState hook, and display them along with a delete button.
1import { useState } from "react"23function App() {4 const [fruits, setFruits] = useState([5 "🍎 Apple",6 "🍊 Orange",7 "🍌 Banana",8 "🍇 Grapes",9 ])10 return (11 <div className="App">12 <ul>13 {fruits.map(fruit => {14 return (15 <li key={fruit}>16 <span>{fruit}</span>17 <button>Delete</button>18 </li>19 )20 })}21 </ul>22 </div>23 )24}2526export default App
If you run the app now, you should be able to see the list of fruits as shown below:
Different ways of deleting
Deleting by value
If you are sure that you have a unique list of items, then you can delete the item using the value:
1import { useState } from "react"23function App() {4 const [fruits, setFruits] = useState([5 "🍎 Apple",6 "🍊 Orange",7 "🍌 Banana",8 "🍇 Grapes",9 ])10 const deleteByValue = value => {11 setFruits(oldValues => {12 return oldValues.filter(fruit => fruit !== value)13 })14 }15 return (16 <div className="App">17 <ul>18 {fruits.map(fruit => {19 return (20 <li key={fruit}>21 <span>{fruit}</span>22 <button onClick={() => deleteByValue(fruit)}>Delete</button>23 </li>24 )25 })}26 </ul>27 </div>28 )29}3031export default App
Here, we are passing a callback to the setFruits
function. Inside the callback, we are calling the filter function,
which filters all the values except the one passed to the deleteByValue
, hence deleting the passed value.
Deleting by index
If you think you can have duplicate values and you want to delete them by the array index, you can achieve it in a similar fashion.
1import { useState } from "react"23function App() {4 const [fruits, setFruits] = useState([5 "🍎 Apple",6 "🍊 Orange",7 "🍌 Banana",8 "🍇 Grapes",9 ])10 const deleteByIndex = index => {11 setFruits(oldValues => {12 return oldValues.filter((_, i) => i !== index)13 })14 }15 return (16 <div className="App">17 <ul>18 {fruits.map((fruit, index) => {19 return (20 <li key={fruit}>21 <span>{fruit}</span>22 <button onClick={() => deleteByIndex(index)}>Delete</button>23 </li>24 )25 })}26 </ul>27 </div>28 )29}3031export default App
Deleting an object from the array
If you have an array of objects and you want to delete them based on the id of the object, you can do so by using the following code:
1import { useState } from "react"23function App() {4 const [fruits, setFruits] = useState([5 { id: 1, name: "🍎 Apple" },6 { id: 2, name: "🍊 Orange" },7 { id: 3, name: "🍌 Banana" },8 { id: 4, name: "🍇 Grapes" },9 ])10 const deleteById = id => {11 setFruits(oldValues => {12 return oldValues.filter(fruit => fruit.id !== id)13 })14 }15 return (16 <div className="App">17 <ul>18 {fruits.map(fruit => {19 return (20 <li key={fruit.id}>21 <span>{fruit.name}</span>22 <button onClick={() => deleteById(fruit.id)}>Delete</button>23 </li>24 )25 })}26 </ul>27 </div>28 )29}3031export default App
My favorite way of deleting is deleting by id, followed by the index. Let me know which is your favorite in the comments below 👇.
If you have liked article, stay in touch with me by following me on twitter.
Leave a Comment