<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.26.0/babel.min.js"></script>
<script type="text/babel">
const { useState } = React;
const [array1, setArray1] = useState([
{ id: 1, name: 'computer' },
{ id: 2, name: 'Laptop' },
{ id: 3, name: 'Mobile' },
{ id: 4, name: 'Tablet' },
{ id: 5, name: 'Smartwatch' },
{ id: 6, name: 'Television' },
{ id: 7, name: 'Headphones' },
{ id: 8, name: 'Camera' },
{ id: 9, name: 'Game Console' },
const [array2, setArray2] = useState([
{ id: 4, name: 'Tablet' },
{ id: 5, name: 'Smartwatch' },
{ id: 7, name: 'Headphones' },
{ id: 8, name: 'Camera' },
const [resultArray, setResultArray] = useState([]);
function compareAndRemove() {
const updatedArray = [...array1];
const index = updatedArray.findIndex(obj => obj.id === item.id);
updatedArray.splice(index, 1);
setResultArray(updatedArray);
<div className='container'>
<h1>React Js compare two arrays and remove object by object id</h1>
<li key={item.id}>{item.id} - {item.name}</li>
<li key={item.id}> {item.id} - {item.name}</li>
<button onClick={compareAndRemove}>Compare and Remove</button>
{resultArray.map(item => (
<li key={item.id}>{item.id} - {item.name}</li>
ReactDOM.render(<App />, document.getElementById('app'));
box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.1);