problem

import React, { Component } from 'react';
import timezones from '../../data/timezones';
import map from 'lodash/map';

class SignupForm extends Component{
  constructor(props){
    super(props);
    this.state = {
      username: '',
      email: '',
      password: '',
      passwordConfirmation: '',
      timezone: '',
      errors: {}
    }

    this.onSubmit = this.onSubmit.bind(this);
    this.onChange = this.onChange.bind(this);
  }

  onChange(e){
    this.setState({[e.target.name]: e.target.value});
  }

  onSubmit(e){
    e.preventDefault();
    this.setState({ errors: {} });
    this.props.userSignupRequest(this.state).then(
      () => {},
      ({ data }) => this.setState({errors: data})
    )
  }

  render(){
    const { errors } = this.state;
    const options = map(timezones, (val, key) =>
        <option key={val} value={val}>{key}</option>
    );

    return (
      <form onSubmit={this.onSubmit}>
        <h1>Registro de usuario</h1>

        <div className="form-group">
          <label className="control-label">Nombre de Usuario</label>
          <input
            value={this.state.username}
            onChange={this.onChange}
            type="text"
            name="username"
            className="form-control"
            />
          {errors.username}
        </div>

        <div className="form-group">
          <label className="control-label">Correo Electronico</label>
          <input
            value={this.state.email}
            onChange={this.onChange}
            type="email"
            name="email"
            className="form-control"
            />
        </div>

        <div className="form-group">
          <label className="control-label">Contraseña</label>
          <input
            value={this.state.password}
            onChange={this.onChange}
            type="password"
            name="password"
            className="form-control"
            />
        </div>

        <div className="form-group">
          <label className="control-label">Confirmación Contraseña</label>
          <input
            value={this.state.passwordConfirmation}
            onChange={this.onChange}
            type="password"
            name="passwordConfirmation"
            className="form-control"
            />
        </div>

        <div className="form-group">
          <label className="control-label">Zona Horaria</label>
          <select
            className="form-control"
            name="timezone"
            onChange={this.onChange}
            value={this.state.timezone}
          >
            <option value="" disabled>Elije tu Zona Horaria</option>
            {options}
          </select>
        </div>

        <div className="form-group">
          <button className="btn btn-primary btn-lg">
            Sign up
          </button>
        </div>

      </form>
    );
  }
}

SignupForm.propTypes = {
  userSignupRequest: React.PropTypes.func.isRequired
}

export default SignupForm;