Форма удаления объекта из массива в стейтах React

В статье "Форма добавления в массив объектов в стейтах React" приведён пример кода для добавления произвольного объекта в массив. Причём добавляемого объекта задавались самим пользователейм. В этой статье продолжим тему редактирования таких массивов из объектов, приведя пример для удаления одного объекта из такого массива.

Попробуем модифицировать пример из предыдущей статьи и добавим кнопку для удаления объекта. Удаление будет происходить по "id", значение которого будет передавать в функцию удаления по клику на кнопку:

const mouseText = [
   {
      id: 'tl2zI5J3IbLwukybTEsIxXXb6',
      prop1: 'Тише',
      prop2: 'мыши',
      prop3: 'кот на крыше',
   },
   {
      id: 'ViWgVtvU2qRo6huLg18DdYuio',
      prop1: 'А котята',
      prop2: 'ещё',
      prop3: 'выше',
   },
];

import React, { useState } from 'react';

function App() {
   const [objArr, setValue] = useState(mouseText);

   function delete(id) { // удаление объекта из массива при совпадении id
      setValue(objArr.filter(obj => obj.id != id));
   }
   
   const result = objArr.map((obj) => { // вывод свойств массива объектов
      return <p key={obj.id}>
         {obj.prop1}
         {obj.prop2}
         {obj.prop3}

         <button onClick={() => delete(obj.id)}>Удалить</button>
      </p>;
   });

   return <div>
      {result}
   </div>;
}

export default App;

Такой код выведет в браузер два параграфа со словами стихотворения. В конце каждой строки будет кнопка с надписью "Удалить", при клике на которую объект массива (и сама строка) будет удалён.