import React from 'react';
import ReactDOM from 'react-dom';

class InputForm extends React.Component{
  constructor(props) {
    super(props);
    this.state = {
      firstName: '',
      lastName: ''
    };
  }
  firstNameSet = (event) => {
    this.setState({firstName: event.target.value})
  }
  lastNameSet = (event) => {
    this.setState({lastName: event.target.value})
  }
  warningMessage = () => {
    // if (this.state.firstName.length + this.state.lastName.length < 20) {
    //   return null;
    // }a
    return <h3>The username {this.state.firstName}.{this.state.lastName} is greater than 20 characters {this.state.firstName.length + this.state.lastName.length}.</h3>;
  }
  render(){
    return(
        <form>
          <label for="firstName">First Name:</label>
          <input name="firstName" id="firstName" type="text" onChange={this.firstNameSet} />
          <br />
          <label for="lastName">Last Name:</label>
          <input name="lastName" id="lastName" type="text" onChange={this.lastNameSet} />
          <br />
          <input type="submit" />
          {this.warningMessage}
        </form>
    )
  }
}
ReactDOM.render(<InputForm />, document.getElementById('root'));