> Как реализовать добавление и удаление кнопок с уникальными id в React при кликах (React, JavaScript)

Для реализации динамического добавления и удаления кнопок с уникальными ID в React можно использовать состояние (state) с массивом объектов. Вот пример:

JSX
import React, { useState } from 'react';

function ButtonManager() {
  const [buttons, setButtons] = useState([]);
  let idCounter = 0;

  const addButton = () => {
    const newButton = { id: `btn-${Date.now()}-${idCounter++}` };
    setButtons(prev => [...prev, newButton]);
  };

  const removeButton = (id) => {
    setButtons(prev => prev.filter(btn => btn.id !== id));
  };

  return (
    <div>
      <button onClick={addButton}>Добавить кнопку</button>
      <div>
        {buttons.map(btn => (
          <button key={btn.id} onClick={() => removeButton(btn.id)}>
            Удалить {btn.id}
          </button>
        ))}
      </div>
    </div>
  );
}

Ключевые моменты:

• Используем useState для хранения массива кнопок.

• Генерируем уникальный ID через Date.now() с счетчиком для избежания коллизий.

• При добавлении создаем новый объект и распространяем массив через spread-оператор.

• При удалении фильтруем массив по ID.

• Обязательно задаем key при рендеринге списка для эффективной работы React.

Для более сложных сценариев (например, при серверной генерации ID) можно использовать библиотеку uuid:

JAVASCRIPT
import { v4 as uuidv4 } from 'uuid';
const newButton = { id: uuidv4() };