title: Why don't the comments appear instantly in my React app project?
body: <p>I am working on my very first React application and i got stuck trying to create a comment section for a blog. Whenever i leave a comment under a post, it doesnt appear instantly but after i've refreshed or returned to the page.
  In my console they do show up instantly.
  Can anyone help me solve this?</p>
  <p><strong>CommentAdd</strong></p>
  <pre><code>function CommentAdd(props) {
  
      const {handleCommentSubmit} = props;
  
      const [comment, setComment] = useState('');
  
      return (
          &lt;div&gt;
              &lt;div className=&quot;card mt-4 mb-3&quot;&gt;
                  &lt;div className=&quot;card-header&quot;&gt;&lt;strong&gt;Comments&lt;/strong&gt;&lt;/div&gt;
                  &lt;div className=&quot;card-body&quot;&gt;
                      &lt;textarea name=&quot;comments&quot; className=&quot;form-control&quot; placeholder=&quot;Add a new comment&quot;
                                onChange={event =&gt; setComment(event.target.value)} value={comment}/&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div&gt;
                  &lt;button className=&quot;btn btn-primary mr-3&quot; onClick={event =&gt; {
                      handleCommentSubmit(comment);
                      setComment('');
                  }}&gt;Comment&lt;/button&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  
  export default CommentAdd;
  </code></pre>
  <p><strong>CommentGroup</strong></p>
  <pre><code>class CommentGroup extends Component {
      constructor(props) {
          super(props);
  
          this.state = {
              body: [],
              postId: props.postId,
              storyParts: props.storyParts || [],
              datePublished: new Date(),
              isLoaded: false
          }
  
          this.handleCommentSubmit = this.handleCommentSubmit.bind(this);
  
      }
  
      async componentDidMount() {
          await this.setState({comments: this.props.comments});
  
      }
  
      handleCommentSubmit(data) {
          console.log(JSON.stringify(data));
          const postData = {
              body: data,
              postId: this.state.postId,
              datePublished: new Date(),
          };
  
          console.log(postData)
  
          axios.create(postData).then((response) =&gt; {
              console.log('response', response.data);
              let comments = this.state.comments;
              if (response.data)
                  comments.unshift({
                      id: response.data.storyId,
                      body: response.data.body,
                      localDate: response.data.localDate,
                  })
              this.setState({comments: this.props.comments});
          });
      }
  
      renderComments() {
          return this.props.comments.map((comment, index) =&gt; {
              const {finishStoryId, storyId, body, localDate} = comment;
              return (
                  &lt;Comment key={index} storyId={storyId} body={body} localDate={localDate} finishStoryId={finishStoryId}/&gt;
              );
  
          })
      }
  
      render() {
          return (
              &lt;div&gt;
                  {this.renderComments()}
                  &lt;CommentAdd handleCommentSubmit={this.handleCommentSubmit}/&gt;
              &lt;/div&gt;
          );
      }
  }
  
  export default CommentGroup;
  </code></pre>