Bir Add düğmesi olan bir React bileşeni yazın. Add düğmesine tıklandığında, sıralı numaraya sahip yeni bir düğme eklenir. Oluşturulan düğmeye tıklandığında, o düğme kaldırılır. Kaldırma doğru şekilde çalışmalıdır (indeks değil, benzersiz kimlik ile).

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

function AddButtons() { const [buttons, setButtons] = useState([]); const [counter, setCounter] = useState(1);

const addButton = () => { setButtons(prev => [...prev, { id: Date.now(), number: counter }]); setCounter(prev => prev + 1); };

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

return ( <div> <button onClick={addButton}>Add</button> <div style={{ marginTop: '10px' }}> {buttons.map(button => ( <button key={button.id} onClick={() => removeButton(button.id)}> {button.number} </button> ))} </div> </div> ); }

export default AddButtons;

В этом компоненте при нажатии на кнопку "Add" создаётся новая кнопка с уникальным `id` и порядковым номером. При нажатии на любую из созданных кнопок она удаляется по уникальному `id`, что предотвращает ошибки при удалении по индексу.