Unhandled rejection SubmissionError: Submit Validation Failed - reactjs

Question

I'm working to enable server-side validation with redux-form, where when a user submits the SignUp form, if the server responds with an error, the form shows the error... In this case the error has a status of 422 from the server and is responding w {"errors":{"email":["has already been taken"]}}
While the form is submitting fine, I can't get the SubmissionError to display on the form. I'm getting the following error in the JS console:
Unhandled rejection SubmissionError: Submit Validation Failed
What am I doing wrong with redux-form submit validation handling? Thanks
SignUpForm
const ensureValid = response => {
if (response.status === 422) {
return response.json().then(({errors}) => {
throw new SubmissionError({
email: 'Already in Use',
_error: 'failed!',
});
});
}
return response;
};
class SignUp extends React.Component {
handleSubmit(data) {
const request = new Request('http://localhost:4400/auth/', {
method: 'POST',
headers: new Headers({
'Accept' : 'application/json',
'Content-Type' : 'application/json',
}),
body: JSON.stringify({ user: data })
});
fetch(request).then(ensureValid).then(response => {
return tryLogin(response, this.props.dispatch);
});
}
render() {
const { error, handleSubmit, pristine, reset, submitting } = this.props;
return (
<div className="container">
<div className="row justify-content-md-center">
<div className="col-6">
<h1>Sign Up - it's free.</h1>
<form onSubmit={this.props.handleSubmit(this.handleSubmit.bind(this))}>
<Field
name="first_name"
type="text"
component={renderField}
label="First Name"
/>
<Field
name="last_name"
type="text"
component={renderField}
label="Last Name"
/>
<Field
name="email"
type="text"
component={renderField}
label="Email"
/>
<Field
name="password"
type="password"
component={renderField}
label="Password"
/>
<button type="submit" disabled={submitting}>Submit</button>
{error && <strong>{error}</strong>}
</form>
</div>
</div>
</div>
);
}
}
// Decorate the form component
SignUp = reduxForm({
form: 'SignUp' // a unique name for this form
})(SignUp);
const mapStateToProps = state => {
return {
};
};
const mapDispatchToProps = (dispatch) => bindActionCreators({
dispatch
}, dispatch)
export default connect(mapStateToProps, mapDispatchToProps)(SignUp);

Answer 1

Turns out I needed to update:
BEFORE:
fetch(request)...
AFTER:
return fetch(request) ...