Remove duplicates from an Array in React

avatar

Borislav Hadzhiev

Last updated: Apr 25, 2022

banner

Photo from Unsplash

Remove duplicates from an Array in React #

To remove the duplicates from an array in React, pass the array to the Set constructor, e.g. [...new Set(arr)]. Each value in a Set has to be unique, so any duplicates get automatically removed.

App.js
const App = () => { const fruits = ['apple', 'apple', 'banana', 'banana', 'kiwi']; const withoutDuplicates = [...new Set(fruits)]; // 👇️ ['apple', 'banana', 'kiwi'] console.log(withoutDuplicates); return ( <div> {withoutDuplicates.map(fruit => { return ( <div key={fruit}> <h2>{fruit}</h2> </div> ); })} </div> ); }; export default App;
If you need to remove the duplicates from an array of objects, scroll down to the next code snippet.

The parameter we passed to the Set constructor is an iterable - in our case an array.

All of the elements of the array get added to the newly created Set. However, the Set object can only store unique values, so any duplicates get automatically removed.

The last step is to use the Spread operator (...) to unpack the values of the set into a new array.

If you need to remove the duplicates from an array of objects in React:

  1. Create an empty array that will store the unique object IDs.
  2. Call the filter() method on the original array.
  3. On each iteration, check if the unique IDs array contains the ID of the current element.
  4. If the ID is contained, add the object's ID to the unique IDs array and the object to the results array.
App.js
const App = () => { const employees = [ {id: 1, name: 'Alice'}, {id: 1, name: 'Alice'}, {id: 2, name: 'Bob'}, {id: 2, name: 'Bob'}, ]; const uniqueIds = []; const uniqueEmployees = employees.filter(element => { const isDuplicate = uniqueIds.includes(element.id); if (!isDuplicate) { uniqueIds.push(element.id); return true; } return false; }); // 👇️ [{id: 1, name: 'Tom'}, {id: 2, name: 'Nick'}] console.log(uniqueEmployees); return ( <div> {uniqueEmployees.map(employee => { return ( <div key={employee.id}> <h2>id: {employee.id}</h2> <h2>name: {employee.name}</h2> </div> ); })} </div> ); }; export default App;

The function we passed to the Array.filter method gets called with each element in the array.

On each iteration, we check if the unique IDs array contains the ID of the current element.

If it does contain it, we have a duplicate.

If it doesn't contain it, we need to add the ID to the unique IDs array and return a truthy value from the function.

The filter method only adds an element to the results array if the function passed to the method returns a truthy value.

The uniqueEmployees array does not contain any duplicates.

Note that in the example we're using the id property as the object's identifier. In your case the object's identifier might be called something else.

In essence, our solution is to only add unique IDs into the uniqueIds array and only add the object into the results array if the object's ID is not in the uniqueIds array.

I wrote a book in which I share everything I know about how to become a better, more efficient programmer.
book cover
You can use the search field on my Home Page to filter through all of my articles.