SignUpFormExFull.es6

class SignUpForm extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      email: null,
      username: null,
      errorMessages: { // This is new -- if we don't set these defaults, render() will thrown an error
        email: [],
        username: []
      }
    };
    
    this._change = this._change.bind(this);
    this._validate = this._validate.bind(this);
  }
  
  _change(e) {
    this.setState({
      [e.target.name]: e.target.value
    });
  }

 _validate() {
   let valid = true;
   let { username, email } = this.state;
   let errorMessages = {
     username: [],
     email: []
   };
  
   if (username === null || username === '') {
     valid = false;
     errorMessages['username'].push('Username is required');
  } 
  
   if (email === null || email === '') {
     valid = false;
     errorMessages['email'].push('Email is required');
   } 
   
   this.setState({
     errorMessages: errorMessages
   });
   
   if (valid) {
     // Don't forget to POST this form or something!
   }
  }
    
  render() {
    return(
      <form>
        (*) Usernane: <input type='text' name='username' value={this.state.username} onChange={this._change} />
        <div className='error'>{this.state.errorMessages.username.join('. ')}</div>
        (*) Email: <input type='email' name='email' value={this.state.email} onChange={this._change} />
        <div className='error'>{this.state.errorMessages.email.join('. ')}</div>
        <button onClick={this._validate}>Submit</button>
      </form>
    );
  }
}