Удалить элемент из массива в JavaScript и React js с помощью ID

Вот пример того, как вы можете удалить элемент из массива в JavaScript, используя его свойство id:

const array = [{id: 1, name: 'John'}, {id: 2, name: 'Jane'}, {id: 3, name: 'Jack'}];

function deleteById(array, id) {
  for (let i = 0; i < array.length; i++) {
    if (array[i].id === id) {
      array.splice(i, 1);
      break;
    }
  }
}
deleteById(array, 2);
// array is now [{id: 1, name: 'John'}, {id: 3, name: 'Jack'}]

Эта функция принимает массив и id в качестве аргументов, а затем перебирает массив в поисках объекта с соответствующим свойством id. Когда он находит совпадение, он удаляет объект из массива, используя метод splice().

Вот пример того, как вы можете использовать вышеуказанную функцию в компоненте React или Next.js для удаления элемента из массива:

import React, { useState } from 'react';

function MyComponent() {
  const [array, setArray] = useState([{id: 1, name: 'John'}, {id: 2, name: 'Jane'}, {id: 3, name: 'Jack'}]);
  function deleteById(id) {
    for (let i = 0; i < array.length; i++) {
      if (array[i].id === id) {
        array.splice(i, 1);
        break;
      }
    }
    setArray([...array]);
  }
  return (
    <div>
      {array.map(item => (
        <div key={item.id}>
          <span>{item.name}</span>
          <button onClick={() => deleteById(item.id)}>Delete</button>
        </div>
      ))}
    </div>
  );
}

Этот компонент отображает список объектов в переменной состояния array и отображает свойство name каждого объекта в элементе span. Он также включает кнопку Delete для каждого объекта, при нажатии на которую вызывается функция deleteById() и передается id объекта в качестве аргумента. Затем функция deleteById() удаляет объект из array с помощью метода splice() и обновляет состояние с помощью функции setArray().