Schrijf een React-component met een knop 'Toevoegen'. Bij het klikken op de knop 'Toevoegen' wordt er een nieuwe knop met een volgnummer toegevoegd. Bij het klikken op de aangemaakte knop wordt deze verwijderd. Verwijdering moet correct werken (niet op index, maar op een unieke identificator).

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