Return error message in React

Question

I'm learning ReactJS. I'm looking the tutorial - http://facebook.github.io/react/docs/tutorial.html

On submit the script read JSON from the server:

handleCommentSubmit: function(comment) {
    var comments = this.state.data;
    comments.push(comment);
    this.setState({data: comments}, function() {
      // `setState` accepts a callback. To avoid (improbable) race condition,
      // `we'll send the ajax request right after we optimistically set the new
      // `state.
      $.ajax({
        url: this.props.url,
        dataType: 'json',
        type: 'POST',
        data: comment,
        success: function(data) {
          this.setState({data: data});
        }.bind(this),
        error: function(xhr, status, err) {
          console.error(this.props.url, status, err.toString());
        }.bind(this)
      });
    });
  },

And update data. How can I send error message from JSON? Something like this:

<Comment author={comment.author} key={index}>
    {comment.text}
    <div class="error">Error</div>
</Comment>

Should I set it in data: this.setState({[{name: 'John', text: 'text', error: 'error'}]});

And change comments?:

<Comment author={comment.author} key={index}>
    {comment.text}
    <div class="error">{comment.error}</div>
</Comment>

Miles · Accepted Answer · 2015-02-03 07:40:13Z

2

From what I see here, the error returned would be request-specific, not comment-specific. In that paradigm it wouldn't make sense to give each comment an error property. Instead, in this situation I'd keep some sort of array to store the errors:

this.setState({
  errors: this.errors.push(err);
});

Then you can have a separate <ErrorDisplay/> component of your own creation which receives the error array as a prop. Whenever the array changes, perhaps it can display the most recent error for a few seconds. It's up to you.

By the way, dig into Flux as soon as you can. If not Flux, then something else. The folks at Facebook will eagerly tell you that keeping definitive state like this in a React component is to be avoided. It's a necessary evil when getting acquainted with React though, so don't worry.

answered Feb 3, 2015 at 7:40

Miles

2833 silver badges9 bronze badges

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

4 Comments

Nick Bolsh Over a year ago

Thank you. "If not Flux, then something else". What can you advice?

Miles Over a year ago

Some people combine Angular with React too. My point there is that once you're using React in a real application, make sure it only handles the View and leave the data/model/control/etc to other agents. To be partial, I highly recommend Flux. Fluxible (from Yahoo) and Reflux are two excellent implementations of the Flux paradigm. Check them out on GitHub.

Miles Over a year ago

@NickBolsh Here's an example of a Fluxible app using react-router for the routing. Everything view related is React components, while the state and logic is handled in a Flux fashion.

sksallaj Over a year ago

here is 8 no-flux strats for communication: andrewhfarmer.com/component-communication one of which you can use is something called an Observer Pattern (PubSubJS), which is what I use.

Collectives™ on Stack Overflow

Return error message in React

1 Answer 1

4 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Related