Как сделать, чтобы после нажатия на кнопку она исчезала на одну минуту с отсчётом, а потом снова появлялась?

Question

[Daniil]

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

import React from 'react';
import './App.css';

function App() {
 return (
<button>Повторно отправить смс</button>
  );
};

export default App;

Answer 1

[Timur Kostenko]

const App = () => {
  const [isTimerActive, setIsTimerActive] = useState(false);

  const handleClick = () => {
    // активируем счетчик
    setIsTimerActive(true);
    setTimeout(() => {
      // сбрасываем
      setIsTimerActive(false);
    }, 1000);
  };

  return (
    <button disabled={isTimerActive} onClick={handleClick}>
      {isTimerActive ? 'loading...' : 'Повторно отправить смс'}
    </button>
  );
};

export default App;

Answer 2

[Леонид Князев]

Примерный план такой:
- написать обработчик события onclick, который прячет кнопку и запускает таймер на минуту
- написать таймер который раз в секунду обновляет текст, показывая сколько осталось и по истечении времени показывает кнопку обратно

Answer 3

[Islam Ibakaev]

Смена кусков интерфейса реализуется через условный рендеринг

{this.state.secondsLeft
    ?  <Countdown secondsLeft={this.secondsLeft} />
    :  <Form runTimer={this.runTimer} />}

нужно выполнить props.runTimer на успешный сабмит формы