Кнопка, исчезающая после нажатия и заменяющаяся двумя новыми

Условие

Создайте кнопку и реализуйте её поведение так, чтобы при нажатии на неё она исчезала, а вместо неё появлялись две новые кнопки.

Ответ

Храните факт нажатия в состоянии и условно показывайте либо исходную кнопку, либо две новые. Не изменяйте DOM напрямую внутри React-компонента.

import { useState } from 'react';
function SplitButton() {
  const [split, setSplit] = useState(false);
  return split ? <div>
    <button type="button">Первая</button>
    <button type="button">Вторая</button>
  </div> : <button type="button" onClick={() => setSplit(true)}>Разделить</button>;
}

После обновления состояния React удалит исходный элемент и создаст два новых. Их дальнейшее поведение условием не задано, поэтому бесконечное размножение кнопок здесь не добавляется. Для клавиатуры можно дополнительно перевести фокус на первую новую кнопку.