Number guess in react with single component

by John Kiran

HTML

<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="container">
    <!-- This element's contents will be replaced with your component. -->
</div>

Babel + JSX

class NumberGuess extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      attempts: 5,
      msg: '',
    }
    this.validate = this.validate.bind(this);
}
  
  
  validate(e) {
      this.setState( { attempts: this.state.attempts - 1 } );
      let msg;
      let guess = this.refs.myIpt.value;
      if (guess == this.props.targetNumber) {
        msg = 'You Won';
        document.getElementById('iptForm').style.display = "none";
      } else if (this.state.attempts > 1) {
        msg = 'InCorrect guess';
      } else {
        msg = (<div><p>You Lose</p><p>The Number is: {this.props.targetNumber}</p></div>);
        document.getElementById('iptForm').style.display = "none";
      }
      this.setState({ msg: msg });
      e.preventDefault();
  }
  
  
  render() {
    return (
      <div>
        <p>Guess a number between 1 and 10</p>
        <p id="atmpt">
          {"Attempts left: " + this.state.attempts}
        </p>
        <form id="iptForm" onSubmit={this.validate}>
          <input id="userInput" ref="myIpt" type="text" name="number" />
          <button id="btn">Submit</button>
        </form>
        <p id="para">
          {this.state.msg}
        </p>
      </div>
    );
  }
}

let targetNumber=Math.floor(Math.random() * 10) + 1;

ReactDOM.render(
  <NumberGuess targetNumber={targetNumber}/>,
  document.getElementById('container')
);