React Native Remove Repeated Duplicate Object Items from Array

This tutorial explains how to remove repeated and duplicate object item from array in react native application. Sometimes application user add same entries in array by mistake in application and the same entries will make our array longer in size, also it will impact on application load time and performance. So in this example we are going to use below technique to remove duplicate entries in array.

Remove & Repeated Duplicate Object Items from Array in React Native

Lets see the complete source code that helps to remove repeated and duplicate object item from array in react native application.

Step 1: Create a new react native project, if you don’t know how to create a new project in react native just follow this tutorial.

Step 2: Open App.js File in your favorite code editor and erase all code and follow this tutorial.

Step 3: Through react , react-native  packages import all required components.

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';

Step 4: Lets create constructor block inside your App component. In the constructor block we have created a Array named as tempArray that holds multiple array object values.

constructor() {
    super();
    this.tempArray = [
      { id: 1, name: "Sumit" },
      { id: 2, name: "Amit" },
      { id: 3, name: "Sumit" },
      { id: 4, name: "Rakesh" },
      { id: 5, name: "Nitish" },
      { id: 6, name: "Sumit" },
      { id: 7, name: "Sumit" },
      { id: 8, name: "Amit" },
      { id: 9, name: "Amit" },
      { id: 10, name: "Neeraj" },
      { id: 11, name: "Rakesh" },
      { id: 12, name: "Sunil" },
      { id: 13, name: "Anil" },
      { id: 14, name: "Neeraj" },
    ];
  }

Step 5: Implement render method inside the App class and wrapped the below layout design inside the root View component. Inside the render block we have created new variable that named as newArray, this will holds unique entries after duplicate entries filtration.  

render() {

    const newArray = [];
    this.tempArray.forEach(obj => {
      if (!newArray.some(o => o.name === obj.name)) {
        newArray.push({ ...obj })
      }
    });   

    return (
      <View style={styles.Container}>

        <ScrollView>
          {
            newArray.map((item, key) => (
              <TouchableOpacity key={key}>
                <Text style={styles.text} > ID = {item.id} </Text>
                <Text style={styles.text} > Name = {item.name} </Text>
                <View style={{ width: '100%', height: 2, backgroundColor: '#e91e63' }} />
              </TouchableOpacity>
            ))
          }
        </ScrollView>

      </View>
    );
  }

Step 6 : Apply the below style sheet design. 

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',   
  }, 
  text: {
    color: '#000',
    fontSize: 20,
    textAlign: 'center',
    padding: 5,
    textAlign: 'left',
  }
});

Complete Source Code for App.js 

Lets see the complete source code that helps to  remove repeated and duplicate object item from array in react native application.

import React, { Component } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, ScrollView } from 'react-native';

export default class App extends Component {

  constructor() {
    super();
    this.tempArray = [
      { id: 1, name: "Sumit" },
      { id: 2, name: "Amit" },
      { id: 3, name: "Sumit" },
      { id: 4, name: "Rakesh" },
      { id: 5, name: "Nitish" },
      { id: 6, name: "Sumit" },
      { id: 7, name: "Sumit" },
      { id: 8, name: "Amit" },
      { id: 9, name: "Amit" },
      { id: 10, name: "Neeraj" },
      { id: 11, name: "Rakesh" },
      { id: 12, name: "Sunil" },
      { id: 13, name: "Anil" },
      { id: 14, name: "Neeraj" },
    ];
  }

  render() {

    const newArray = [];
    this.tempArray.forEach(obj => {
      if (!newArray.some(o => o.name === obj.name)) {
        newArray.push({ ...obj })
      }
    });   

    return (
      <View style={styles.Container}>

        <ScrollView>
          {
            newArray.map((item, key) => (
              <TouchableOpacity key={key}>
                <Text style={styles.text} > ID = {item.id} </Text>
                <Text style={styles.text} > Name = {item.name} </Text>
                <View style={{ width: '100%', height: 2, backgroundColor: '#e91e63' }} />
              </TouchableOpacity>
            ))
          }
        </ScrollView>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  Container: {
    flex: 1,
    justifyContent: 'center',   
  }, 
  text: {
    color: '#000',
    fontSize: 20,
    textAlign: 'center',
    padding: 5,
    textAlign: 'left',
  }
});

Screenshot : 

This is all about React Native Remove Repeated Duplicate Object Items from Array. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.