Добавить или удалить элемент в массиве

Допустим на странице выводятся элементы из массива:

import { useState } from 'react';

export default function App() {
  const [items, setItems] = useState([
    {name: "JavaScript", id: "1"},
    {name: "ES 5", id: "2"},
    {name: "React", id: "3"}
  ]);

  const list = items.map((item, index) => (
      <li key={item.id}>{item.name}</li>
  ));

  return (
    <ul>{list}</ul>
  );
}

И через код надо добавить или убрать элемент из массива. Делается это через создание массива с новыми данными, т.е. использование метода array.push() или array.pop() будет некорректно (т.к. будет изменение текущего массива, а текущий массив в React не должен изменяться).

Добавить элемент в массив

Чтобы добавить данные, можно использовать код ниже:

import { useState } from 'react';

export default function App() {
  const [items, setItems] = useState([
    {name: "JavaScript", id: "1"},
    {name: "ES 5", id: "2"},
    {name: "React", id: "3"}
  ]);

  // Добавление элемента в массив
  setItems([
    ...items,
    {name: "Новый элемент", id: "4"}
  ]);
}

Удалить элемент в массиве

Аналогично с удалением, т.е. надо создать новый массив, но без нужного элемента.

import { useState } from 'react';

export default function App() {
  const [items, setItems] = useState([
    {name: "JavaScript", id: "1"},
    {name: "ES 5", id: "2"},
    {name: "React", id: "3"}
  ]);

  // Удаление элемента в массиве
  const removeItem = function(item) {
    setItems(items.filter(a => a.id !== item.id));
  }

  // добавлена кнопка "Удалить"
  const list = items.map((item, index) => (
    <li key={item.id}>{item.name} <button onClick={e => removeItem(item)}>удалить</button></li>
  ));
}

Пример кода на Playcode