Hi Friends 👋,
Welcome To Infinitbility! ❤️
To remove an item from the array in react native, just use the splice(index, 1) method it will delete your desired item from an array.
Like the following example, let’s take the below array of objects example here we will find an index of id 3 and delete it from the array.
1let arrOfObj = [2 {id: 1, name: "Infinitbility"},3 {id: 2, name: "aGuideHub"},4 {id: 3, name: "SortoutCode"},5];67let index = arrOfObj.findIndex(e => e.id == 3);89// 👇️ 210console.log(index);1112arrOfObj.splice(index, 1)13// 👇️14// [15// { id: 1, name: 'Infinitbility' },16// { id: 2, name: 'aGuideHub' }17// ]18console.log(arrOfObj);
Today, I’m going to show you How do I remove items from an array in react native, as above mentioned here, I’m going to use the splice() method to remove items from an array.
Let’s start today’s tutorial how do you remove an item from an array in react native?
In this example, we will do
- Create a sample array and array of objects state
- Remove elements from array and array of objects state
- Print array and an array of objects state in react native app screen
Let’s write code…
1import React, { useState, useEffect } from 'react';2import { Text, View, StyleSheet } from 'react-native';34const App = () => {5 const [arr, setArr] = useState(["Infinitbility", "aGuideHub", "SortoutCode"]);6 const [arrOfObj, setArrOfObj] = useState([7 {id: 1, name: "Infinitbility"},8 {id: 2, name: "aGuideHub"},9 {id: 3, name: "SortoutCode"},10 ]);1112 useEffect(() => {13 let array = [...arr];14 let arrayOfObject = [...arrOfObj];15 array.splice(2, 1); // here 2 is index16 arrayOfObject.splice(2, 1); // here 2 is index17 setArr(array);18 setArrOfObj(arrayOfObject);19 }, []);2021 return (22 <View style={styles.container}>23 <Text>{JSON.stringify(arr)}</Text>24 <Text>{JSON.stringify(arrOfObj)}</Text>25 </View>26 );27}2829const styles = StyleSheet.create({30 container: {31 flex: 1,32 justifyContent: 'center',33 backgroundColor: '#ecf0f1',34 padding: 8,35 },36 paragraph: {37 margin: 24,38 fontSize: 18,39 fontWeight: 'bold',40 textAlign: 'center',41 },42});4344export default App;
Note: In the above code I have used […arr] to bypass reference then it will not cause an issue with rendering
As mentioned above, we are taken the example of an array of objects, use the splice() to remove elements from an array, and printed it on the screen.
Let’s check the output.
I hope it’s help you, All the best 👍.
Follow me on Twitter
Join our email list and get notified about new content
No worries, I respect your privacy and I will never abuse your email.
Every week, on Tuesday, you will receive a list of free tutorials I made during the week (I write one every day) and news on other training products I create.
