ReactJS recieving form errors from server

Question

Below is my signup function in React. How can I render the errors it recieves from backend ? I tried to put a this.setResponse into the catch part ... that didn't work. I understand that componentWillReceiveProps should handle updates but this is an update from a Service (also below) not from a parent component.

If I print the err I can see a dictionary with errors, but I don't see how to pass them to the form or to the fields for rendering.

signup(evt) {
    evt.preventDefault();
    ...
      Auth.signup(dict)
        .catch(function(err) {
            alert("There's an error signing up");
            console.log(err.response);
      });
},

The Auth service is defined like this:

signup(dict) {
    console.log(dict);
    return this.handleAuth(when(request({
        url: UserConstants.SIGNUP_URL,
        method: 'POST',
        type: 'json',
        data: dict
    })));
}

And I hoped to send errors to the fields with the following:

<UserNameField
    ref="username"
    responseErrors={this.responseErrors}
/>

Martin Dawson · Accepted Answer · 2016-10-20 19:42:05Z

1

Presuming that UserNameField is in the same component as the auth callback you can just set the state which will trigger a re-render and pass the values through UserNameField as props.

signup(evt) {
    evt.preventDefault();
    ...
      Auth.signup(dict)
        .catch((err) => {
            alert("There's an error signing up");
            console.log(err.response);
            this.setState({error: err});
      });
},

<UserNameField
    ref="username"
    responseErrors={this.responseErrors}
    error={this.state.error}
/>

This is the same as .bind(this).

edited Oct 20, 2016 at 19:42

answered Oct 20, 2016 at 18:03

Martin Dawson

7,6579 gold badges59 silver badges97 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

Stefan Over a year ago

This was the first thing I tried, didn't work. Auth.signup is imported to the Form component from services, that is probably why "this" is undefined in the catch function ... But I look if reshufling it in to the Form component would make sense.

Martin Dawson Over a year ago

@Stefan Use es6 arrow function. this should be defined now. Updated answer.

Stefan Over a year ago

Now it says: "Parsing error: Property assignements valid only in destructuring patterns". Don't know what tath means, just learning about arrow function, but I do have stage-0 installed and working, also babel-react preset and all works with browserify, gulp and that stuff ... Do I miss some other component/setting?

Stefan Over a year ago

It worked once i changed this: signup(evt) { Probably because signup also recieves arguments .. i read something like that above arrows just now .. If you update your response with that change, I mark is as correct. Thanx a lot!

Martin Dawson Over a year ago

@Stefan updated but = () => does work with parameters. I think it may be to do with how you define you component. I use this syntax: class MyClass extends React.Component { signup = (evt) => { } } And it works.

|

Collectives™ on Stack Overflow

ReactJS recieving form errors from server

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related