title: ReactJS - Appending POST response
body: <p>I'm fairly new to ReactJS and I'm trying to figure out the best way to append and present my recently created record without having to refresh my page. Currently my rout has a redirect which makes sense why the triggered post via <code>postComment()</code> is refreshing the page, but I'm curious how I should 1) modify my successful POST route to send a JSON message for React use and not refresh and 2) update my comments section with the newly created comment. Should I convert my <code>Comments</code> component into a state to handle the change?</p>
  
  <p><em>(Note: The comment component is a module with <code>Comments</code> being populated with an array being passed from separate file)</em></p>
  
  <p><strong>Comments Logic:</strong></p>
  
  <pre><code>import React from 'react';
  import fetch from 'node-fetch';
  
  //Record Comment - Comment
  const Comment = props =&gt; {
      return (
          &lt;div className="row"&gt;
              &lt;div className="col-md-12"&gt;
                  &lt;h5&gt;{props.user_id}&lt;/h5&gt;
                  &lt;h4&gt;{props.comment}&lt;/h4&gt;
                  &lt;h3&gt;{props.app_user.fullNameSlug}&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      )
  } 
  
  //Record Comment - Comment Form
  class CommentForm extends React.Component {
      constructor(props){
          super(props);
          this.state = {
              value: ''
          };
          this.onChange = this.onChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
      postComment(comment) {
          fetch('http://localhost:3000/record/:recordId/comment', { method: 'POST', body: comment})
              .then(res =&gt; {
                  return res.json();
              })  
              .then(data =&gt; {
                  console.log(data);
              }) 
              .catch(err =&gt; {
                  console.log(err);
              });
      }
  
      onChange(e){
          this.setState({
              value: e.target.value
          });
      }
  
      handleSubmit(e){
          alert('This is the submit ' + this.state.value);
          postComment();
          e.preventDefault();
  
      }
  
      render(){
          return (
              &lt;div className="record-comment__form"&gt;
                  &lt;div className="row"&gt;
                      &lt;div className="col-md-12"&gt;
                          &lt;label&gt;Comment:&lt;/label&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row"&gt;
                          &lt;form action={"/app/record/" + this.props.recordId + "/comment"} method="post" onSubmit={this.handleSubmit}&gt;
                              &lt;input type="hidden" name="_csrf" value={this.props.csrf}/&gt;
                              &lt;div className="col-md-9"&gt;
                                  &lt;textarea name="comment" className="record-comment__form-text-area" onChange={e =&gt; this.setState({ value: e.target.value })} value={this.state.value}&gt;&lt;/textarea&gt;
                              &lt;/div&gt;
                              &lt;div className="col-md-3"&gt;
                                  &lt;button type="submit" className="record-comment__form-button" disabled={!this.state.value}&gt;Comment&lt;/button&gt;
                              &lt;/div&gt;
                          &lt;/form&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  //Record Comment - Container
  export default class Comments extends React.Component {
      render() {
          return (
              &lt;div className="record-comment-container"&gt;
                  &lt;CommentForm recordId={this.props.recordId} csrf={this.props.csrf}/&gt;
                  { this.props.record_comments.map((comment, i) =&gt; 
                      &lt;Comment {...comment} key={this.props.recordCommentId}/&gt;
                  )}
              &lt;/div&gt;
          );
      }
  }
  </code></pre>
  
  <p><strong>ExpressJS Route:</strong> </p>
  
  <pre><code>//POST /record/:recordId/comment
  exports.create = function(req, res){
      var hashids = new Hashids('record', 10);
      var decodedHash = hashids.decode(req.params.recordId);
      var annotationId = decodedHash[0];
  
      models.RecordComment.create({
          comment: req.body.comment,
          commentId: commentId,
          userId: req.user.userId
      }).then(function(){
          req.flash('success', 'Comment was successfully created');
          res.redirect(req.get('referer'));
      });
  };
  </code></pre>