React компонент жаз, анда 'Кошуу' деп аталган баскыч болот. Кошуу баскычын басканда жаңы баскыч кошулат жана анын номерлөө болот. Жасалган баскычка басканда ал өчүрүлөт. Өчүрүү туура иштеши керек (индекс боюнча эмес, уникалдуу идентификатор боюнча).

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