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

class App extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      message: ''
    };
    // создайте реф с помощью createRef
    this.handleSkip = this.handleSkip.bind(this);
  }
  handleSubmit = () => {
    this.setState({
      message: 'Ваше соглашение принято. Большая ошибка!'
    })
  }
  handleSkip = () => {
    // вызовите метод focus для значения current рефа
  }
  render(){
    return (
      <div className="app">
        <h1>Important Contract</h1>
          <div className="input">
          <button className="input__button" /* добавьте атрибут onClick и назначьте ему обработчик */>
            Скучно! Не хочу читать этот договор!
          </button>
          </div>
          <p className="app__text">
            Это очень важный юридический документ, требующий исключительной внимательности при прочтении.
          </p>
          <p className="app__text">
            При разработке новых версий программного обеспечения вы обязуетесь... и так далее,
            и тому подобное... В случае обнаружения несоответствия каким-либо существующим
            соглашениям вы несёте всю ответственность... Что-то глаза слипаются...
          </p>
          <p className="app__text">
            Протоколы, документы, лицензии! Слияния и поглощения! Подписывая настоящий договор,
            вы подтверждаете, что ознакомлены с содержанием каждого названного документа, и
            соглашаетесь со всеми условиями, указанными в настоящем договоре и перечисленных документах.
            Мы предупредили!
          </p>
          <div className="input">
            <input /* assign the ref */ type="text" className="input__name" placeholder="Ваше полное имя" />
            <input /* assign the onClick handler */ type="submit" className="input__button" value="Я соглашаюсь со всеми условиями!" />
          </div>
          <p className="app__message">{this.state.message}</p>
      </div>
  );
  }
}

export default App;