Navigate back to the homepage

how to remove item from array in react native?

Infinitbility
React Native
June 25th, 2022 · 1 min read
how to remove item from array in react native?

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];
6
7let index = arrOfObj.findIndex(e => e.id == 3);
8
9// 👇️ 2
10console.log(index);
11
12arrOfObj.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

  1. Create a sample array and array of objects state
  2. Remove elements from array and array of objects state
  3. 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';
3
4const 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 ]);
11
12 useEffect(() => {
13 let array = [...arr];
14 let arrayOfObject = [...arrOfObj];
15 array.splice(2, 1); // here 2 is index
16 arrayOfObject.splice(2, 1); // here 2 is index
17 setArr(array);
18 setArrOfObj(arrayOfObject);
19 }, []);
20
21 return (
22 <View style={styles.container}>
23 <Text>{JSON.stringify(arr)}</Text>
24 <Text>{JSON.stringify(arrOfObj)}</Text>
25 </View>
26 );
27}
28
29const 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});
43
44export 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.

React Native, remove item from array example
React Native, remove item from array example

Try it yourself

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.

Looking For React Native Tutorial?

we are trying to create the best Tutorial for react native developers.

When you want a daily updates about React Native Tutorial or infinitbility update subscribe to our newsletter.

Read React Native Tutorial

Request New Tutorial or Article on mail [email protected]

Guide book

Guidebook: The Javascript Monorepo Photoshop Guide

Tutorials

Categories

More articles from Infinitbility

how to map array of objects react native?

how to map array of objects react native?

An example of map array of objects in react native with step by step guide.

June 24th, 2022 · 1 min read
how to push data into array react native?

how to push data into array react native?

An example of push data into array in react native with step by step guide.

June 24th, 2022 · 1 min read
© 2020–2022 Infinitbility
About
Link to $https://medium.com/infinitbilityLink to $https://www.facebook.com/InfinitbilityLink to $https://github.com/infinitbilityLink to $https://twitter.com/infinitbilityLink to $https://www.buymeacoffee.com/infinitbilityLink to $mailto:[email protected]