I'm learning ReactJS. I'm looking the tutorial - .html

On submit the script read JSON from the server:

handleCommentSubmit: function(ment) {
    var ments = this.state.data;
    ments.push(ment);
    this.setState({data: ments}, 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: ment,
        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={ment.author} key={index}>
    {ment.text}
    <div class="error">Error</div>
</Comment>

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

And change ments?:

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

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(ment) {
    var ments = this.state.data;
    ments.push(ment);
    this.setState({data: ments}, 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: ment,
        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={ment.author} key={index}>
    {ment.text}
    <div class="error">Error</div>
</Comment>

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

And change ments?:

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

• javascript
• reactjs

1 Answer 1

From what I see here, the error returned would be request-specific, not ment-specific. In that paradigm it wouldn't make sense to give each ment 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/> ponent 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 ponent is to be avoided. It's a necessary evil when getting acquainted with React though, so don't worry.