title: react js reload or force rerender of a component to reflect change in back end
body: <p>I have an app that pulls articles from an api and shows them in three tables. These table contain liked, disliked and uncommented or unreviewed articles. The unreviewed table contains like and dislike buttons.
  When the user clicks like or dislike i make a post request to the server using axios. This succesfully changes the database but i could not find a way to show the change in front end without manually reloading the app. this.forceUpdate does not work. Is there a way to reload the component so it makes those request and and render the change or is there another way to solve this.</p>
  
  <p>Note. the three group of articles are pulled from the api using 3 get request not 1.</p>
  
  <p>Edit:</p>
  
  <p>Articles module</p>
  
  <pre><code>var Articles = React.createClass({
      getInitialState: function() {
          return {
              unReviewed: null,
              liked: null,
              disliked: null
          };
      },
      componentWillMount: function() {
          this.getArticles();
      },
      getArtiles: function () {
          //3 api call here and set the response to unReviewed, liked and disliked
      },
      handleReview: function() {
          this.forceUpdate();
      },
      render: function() {
          var {unReviewed, liked, disliked} = this.state;
          if (//all three state are null) {
              return(&lt;div&gt;Loading...&lt;/div&gt;);
          } else {
              return(
              &lt;div&gt;
                  &lt;h1&gt;Articles&lt;/h1&gt;
                  &lt;h2&gt;New / Unreviewed&lt;/h2&gt;
                  &lt;ArticleTable articles={unReviewed} onReview={this.handleReview}/&gt;
                  &lt;h2&gt;liked&lt;/h2&gt;
                  &lt;ArticleTable articles={liked}/&gt;
                  &lt;h2&gt;disliked&lt;/h2&gt;
                  &lt;ArticleTable articles={disliked}/&gt;
              &lt;/div&gt;
              );
          }
      }
  });
  </code></pre>
  
  <p>ArticlesTable module</p>
  
  <pre><code>var ArticleTable = React.createClass({
      handleReview: function () {
          this.props.onReview();
      },
      render: function () {
          var {articles} = this.props;
          var renderData = () =&gt; {
              return articles.map((article) =&gt; {
                  return (
                      &lt;ArticleItem key={article.id} {...article} onReview={this.handleReview}/&gt;
                  );
              });
          };
  
          return(
              &lt;table&gt;
                  &lt;thead&gt;//headers
                  &lt;/thead&gt;
                  &lt;tbody&gt;{renderData()}&lt;/tbody&gt;
              &lt;/table&gt;
          );
      }
  });
  </code></pre>
  
  <p>ArticleItem module</p>
  
  <pre><code>var ArticleItem = React.createClass({
      propTypes: {
         //validating props
      },
  
      onReview: function (id) {
          //making post api call
          that.props.onReview();
      },
  
      render: function () {
          var {id, text, author, date, liked} = this.props;
          var that = this;
          if(liked == null){
             liked = "--";
          }
          var review = function () {
              if(liked == "--") {
                  return(&lt;span&gt;
                      &lt;button onClick={() =&gt; that.onReview(id)}&gt;Like&lt;/button&gt;
                  &lt;/span&gt;);
              }
              return null;
          };
  
          return (
              &lt;tr&gt;
                  &lt;td&gt;{id}&lt;/td&gt;
                  //other parts of article
                  &lt;td&gt;{review()}&lt;/td&gt;
              &lt;/tr&gt;
          );
      }
  });
  </code></pre>