ReactJS - renderowanie błędów ajax w komponencie

Hejka, uczę się reacta i mam problem z formularzem.

Ogólnie formularz działa. Chciałbym dodać do niego wyświetlanie błędów.

Stworzyłem oddzielny komponent, ale nie bardzo wiem jak wyświetlić błędy z jsona ,które dostaję po requescie ajaxowym.

Mój kod wygląda tak:

 

var BasicInput = React.createClass({
    render: function () {
        return (
            <input type="text"onChange={this.props.valChange} value={ this.props.val} />
);
}
});
var BasicInputPassword = React.createClass({
    render: function () {
        return (
            <input type="password"onChange={this.props.valChange} value={ this.props.val} />
);
}
});
var FormError = React.createClass({
    render: function () {
        return (
            <span className="form-error">{this.props.val}</span>
);
}
});

var EmailForm = React.createClass({

    getInitialState: function(){
      return {
          password:'',
email: ''
};
},
componentDidMount: function() {
        this.serverRequest = $.get('/accounts/email-form/', function (result) {
          var userInfo = result;
this.setState({
            email: userInfo.email
});
}.bind(this));
},
submit: function (e){
      var self;
e.preventDefault()
      self = this;
console.log(this.state);
var data = {
        password: this.state.password,
email: this.state.email,
CSRF: csrftoken
      };
// Submit form via jQuery/AJAX
function csrfSafeMethod(method) {
            // these HTTP methods do not require CSRF protection
return (/^(GET|HEAD|OPTIONS|TRACE)$/.test(method));
}
      $.ajaxSetup({
            beforeSend: function(xhr, settings) {
                if (!csrfSafeMethod(settings.type) && !this.crossDomain) {
                    xhr.setRequestHeader("X-CSRFToken", csrftoken);
}
            }
      });
$.ajax({
        type: 'POST',
url: '/accounts/email-form/',
data: data
      })
      .done(function(data) {
        toastr.success('Profile updated');
})
      .fail(function(jqXhr) {
        toastr.error('There is some errors in your request');
});
},
passwordChange: function(e){
      this.setState({password: e.target.value});
},
emailChange: function(e){
     this.setState({email: e.target.value});
},
render: function() {
        return (
            <form onSubmit={this.submit}>
<div className="form-half">
<label htmlFor="password"className="input-label">Current Password</label>
<BasicInputPassword valChange={this.passwordChange} val={this.state.password}/>
<FormError/>
</div>
<div className="form-half">
<label htmlFor="lastname"className="input-label">New email</label>
<BasicInput valChange={this.emailChange} val={this.state.email}/>
<FormError/>
</div>
<button type="submit"className="button secondary">Submit</button>
</form>
);
}
});

Czy ktoś mógłby mnie naprowadzić na dobre rozwiązenie ? Z góry wielkie dzięki.