Scrivi un componente React con un pulsante Aggiungi. Quando si clicca sul pulsante Aggiungi, viene aggiunto un nuovo pulsante con un numero di ordine. Quando si clicca sul pulsante creato, esso viene rimosso. La rimozione deve funzionare correttamente (non per indice, ma per identificatore univoco).

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`, что предотвращает ошибки при удалении по индексу.