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

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