Schreiben Sie eine React-Komponente mit einem Button 'Hinzufügen'. Beim Klicken auf 'Hinzufügen' wird ein neuer Button mit einer Reihenfolgenummer hinzugefügt. Beim Klicken auf den erstellten Button wird dieser entfernt. Das Entfernen sollte korrekt funktionieren (nicht nach Index, sondern nach eindeutiger ID).

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