Middle+
Scrieți un component React cu un buton Adaugă. La apăsarea butonului Adaugă, se adaugă un nou buton cu un număr de ordine. La apăsarea butonului creat, acesta se șterge. Ștergerea trebuie să funcționeze corect (nu după index, ci după un identificator unic).
sobes.tech AI
Răspuns de la AI
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`, что предотвращает ошибки при удалении по индексу.