React Remove Duplicate from Array
React can remove duplicates from an array of data, which is useful for filtering, sorting, or displaying unique items in a list. The approach to removing duplicates depends on whether the array contains primitive values (such as numbers or strings) or objects (like custom components or props). In this article, we will explore various methods to remove duplicates from an array in React
Thanks for your feedback!
Your contributions will help us to improve service.
How Do You Remove Duplicate Values from a Array in React Js?
React Js Remove Duplicate Value or Element from Array:To remove duplicate values or elements from an array in React.js, there are several approaches.
One method is to use the Set() method, which automatically eliminates duplicates by creating a new set from the array and then converting it back into an array.
React Js Remove Duplicate Value or Element from Array using sets() Method
xxxxxxxxxx <script type="text/babel"> function App() { const array = [1, 2, 3, 2, 4, 1, 5, 4, 'apple', 'apple', 'Mango', "Mango"]; // Use Set to remove duplicates const uniqueArray = [...new Set(array)]; return ( <div className='container'> <h2>React Js Remove Duplicate value or item from array</h2> <h3>Array with Duplicates:</h3> <p>{array.join(', ')}</p> <h3>Array without Duplicates:</h3> <p>{uniqueArray.join(', ')}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>Output of Check Array has Duplicate Values in React Js
How to remove duplicate values in a React.js array using iteration?
Another approach is to iterate over the array and manually filter out the duplicates. This can be done using a loop and checking if each element already exists in a separate array.
React Js Remove Duplicate Value or Element from Array using iteration approach
xxxxxxxxxx <script type="text/babel"> function App() { const array = [1, 2, 3, 2, 4, 1, 5, 4, 'apple', 'apple', 'Mango', "Mango"]; const uniqueArray = []; array.forEach((element) => { if (!uniqueArray.includes(element)) { uniqueArray.push(element); } }); return ( <div className='container'> <h2>React Js Remove Duplicate value or item from array</h2> <h3>Array with Duplicates:</h3> <p>{array.join(', ')}</p> <h3>Array without Duplicates:</h3> <p>{uniqueArray.join(', ')}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>How can we use the filter() method in React.js to remove duplicate values or elements from an array?
Alternatively, the filter() method can be used with an additional check to keep only the first occurrence of each element.
React Js Remove Duplicate Value or Element from Array using filter() method
xxxxxxxxxx <script type="text/babel"> function App() { const array = [1, 2, 3, 2, 4, 1, 5, 4, 'apple', 'apple', 'Mango', "Mango"]; const uniqueArray = array.filter((value, index, self) => self.indexOf(value) === index); return ( <div className='container'> <h2>React Js Remove Duplicate value or item from array</h2> <h3>Array with Duplicates:</h3> <p>{array.join(', ')}</p> <h3>Array without Duplicates:</h3> <p>{uniqueArray.join(', ')}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>How can we use the reduce() method in ReactJS to remove duplicate values or elements from an array?
The reduce() method can also be employed to accumulate unique elements while iterating over the array. Lastly, the map() method can be used in combination with a hash table or an object to filter out duplicates based on their keys
React Js Remove Duplicate Value or Element from Array using reduce() method
xxxxxxxxxx <script type="text/babel"> function App() { const array = [1, 2, 3, 2, 4, 1, 5, 4, 'apple', 'apple', 'Mango', "Mango"]; const uniqueArray = array.reduce((accumulator, currentValue) => { if (!accumulator.includes(currentValue)) { accumulator.push(currentValue); } return accumulator; }, []); return ( <div className='container'> <h2>React Js Remove Duplicate value or item from array</h2> <h3>Array with Duplicates:</h3> <p>{array.join(', ')}</p> <h3>Array without Duplicates:</h3> <p>{uniqueArray.join(', ')}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>How can you remove duplicate values or elements from an array using the `map()` method in React.js?
The code snippet in the provided script removes duplicate values from an array in React.js.
It uses the Array.from method and the Map object to create a new array containing only the unique values from the original array.
React Js Remove Duplicate Value or Element from Array using map() method
xxxxxxxxxx <script type="text/babel"> function App() { const array = [1, 2, 3, 2, 4, 1, 5, 4, 'apple', 'apple', 'Mango', "Mango"]; const uniqueArray = Array.from(new Map(array.map((value) => [value, value])).values()); return ( <div className='container'> <h2>React Js Remove Duplicate value or item from array</h2> <h3>Array with Duplicates:</h3> <p>{array.join(', ')}</p> <h3>Array without Duplicates:</h3> <p>{uniqueArray.join(', ')}</p> </div> ); } ReactDOM.render(<App />, document.getElementById("app")); </script>