Remove Objects from Array using React Native

Hi everyone, In this article, we will learn about How to Remove Objects from Array using 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, 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 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 Array using React Native. Basically, we need to remove an object from ArrayList which 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 define 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:

Remove Objects from Array using React Native

Thank you 🙂

Leave a Reply

Your email address will not be published.