Home » React-native » How to remove objects from array in React Native

How to remove objects from array in React Native

Pro Level React-native

Hi everyone, In this article, we will learn about How to remove objects from array in React Native. While developing a mobile application developers need to add or remove particular objects from the array list so, in this example, we are creating a project to remove objects from the array list if a particular condition is satisfied. basically, the filter will create a new array if the element passes the test condition provided in the callback.

Basically, we are using the filter method to create a new list with a particular type of object. so let’s understand with an example.

1. Create a new project

Use the following command to create a new project. for more information check this post

react-native init ProjectName

2. Imports the following components

In this example, we are using hooks with a function so import the following components and define an ArrayList. In this useState is used to set and get data from state

import React, {useState} from 'react';

import {
  Text,
  View,
  TouchableOpacity,
} from 'react-native';


const arrayList = [
  {
    id: 1,
    displaytype: 'image',
  },
  {
    id: 2,
    displaytype: 'image',
  },
  {
    id: 3,
    displaytype: 'video',
  },
  {
    id: 4,
    displaytype: 'image',
  },
  {
    id: 5,
    displaytype: 'image',
  },
  {
    id: 6,
    displaytype: 'video',
  },
  {
    id: 7,
    displaytype: 'image',
  },
  {
    id: 8,
    displaytype: 'video',
  },
  {
    id: 9,
    displaytype: 'image',
  },
  {
    id: 10,
    displaytype: 'video',
  },
];

3. Create a function

Create default function App, define the default state & pass ArrayList as a default value of ArrayList in useState.

export default function App() {
  const [getArrayList, setArrayList] = useState(arrayList);  //<--Define default array list 

  return (
    <View>
     
    </View>
  );
}

4. Create a const function to remove the object from ArrayList

Create a function to Remove Objects from an Array using React Native. Basically, we need to remove an object from ArrayList whose displayType is video. means we are showing only displayType image in List.

 const getImageArray = () => {
    var newArrayList = [];
    newArrayList = getArrayList.filter(item => item.displaytype == 'image');
    return newArrayList;
  };

5. Render default ArrayList using the map function

We have displayed ArrayList & one button to remove the object from ArrayList.

You can directly type getArrayList.map(item=> { return (<View></View>)}). getArrayList is directly displayed default ArrayList which we have defined in useState().

Also, create const function removeObjectFromList which calls when the button is press

export default function App() {
  const [getArrayList, setArrayList] = useState(arrayList);

  // Const function to remove objects from ArrayList
  const getImageArray = () => {
    var newArrayList = [];
    newArrayList = getArrayList.filter(item => item.displaytype == 'image');
    return newArrayList;
  };

  // Const function which calls on button press
  const removeObjectFromList = () => {
    setArrayList(getImageArray());    
  };

  return (
    <View>
      <Text style={{fontSize: 30, textAlign: 'center', margin: 30, color: '#0b44c5'}}>
        Remove Object from Array using React Native
      </Text> 
      <View>
        {getArrayList.map(item => {           //<-- Render default ArrayList from useState
          return (
            <View style={{alignItems: 'center'}}>
              <Text style={{fontSize:20}}>
                {item.id}
                {'  '}
                {item.displaytype}
              </Text>
            </View>
          );
        })}
      </View>
      <TouchableOpacity
        onPress={removeObjectFromList}
        style={{
          alignItems: 'center',
          padding: 5,
          borderColor: 'black',
          borderWidth: 1,
          margin: 10,
          backgroundColor:'#2b65ea'
        }}>
        <Text style={{fontSize:20, color: 'white'}}>Filter images from list</Text>
      </TouchableOpacity>
    </View>
  );
}

6. Source code (App.js)

here’s the full source code of App.js.

import React, {useState} from 'react';

  import {
    Text,
    View,
    TouchableOpacity,
  } from 'react-native';


  const arrayList = [
    {
      id: 1,
      displaytype: 'image',
    },
    {
      id: 2,
      displaytype: 'image',
    },
    {
      id: 3,
      displaytype: 'video',
    },
    {
      id: 4,
      displaytype: 'image',
    },
    {
      id: 5,
      displaytype: 'image',
    },
    {
      id: 6,
      displaytype: 'video',
    },
    {
      id: 7,
      displaytype: 'image',
    },
    {
      id: 8,
      displaytype: 'video',
    },
    {
      id: 9,
      displaytype: 'image',
    },
    {
      id: 10,
      displaytype: 'video',
    },
  ];

export default function App() {
  const [getArrayList, setArrayList] = useState(arrayList);

// Const function which calls on button press
  const removeObjectFromList = () => {
    setArrayList(getImageArray());
  };

  const getImageArray = () => {
    var newArrayList = [];
    newArrayList = getArrayList.filter(item => item.displaytype == 'image');
    return newArrayList;
  };

  return (
    <View>
      <Text style={{fontSize: 30, textAlign: 'center', margin: 30, color: '#0b44c5'}}>
        Remove Object from Array using React Native
      </Text> 
      <View>
        {getArrayList.map(item => {
          return (
            <View style={{alignItems: 'center'}}>
              <Text style={{fontSize:20}}>
                {item.id}
                {'  '}
                {item.displaytype}
              </Text>
            </View>
          );
        })}
      </View>
      <TouchableOpacity
        onPress={removeObjectFromList}
        style={{
          alignItems: 'center',
          padding: 5,
          borderColor: 'black',
          borderWidth: 1,
          margin: 10,
          backgroundColor:'#2b65ea'
        }}>
        <Text style={{fontSize:20, color: 'white'}}>Filter images from list</Text>
      </TouchableOpacity>
    </View>
  );
}

7. Output:

There are multiple array functions available in React Native. To learn more about React Native array functions check this article.

Remove Objects from Array using React Native

Thank you 🙂

Related Posts

Leave a Reply

Your email address will not be published. Required fields are marked *