title: Right way to update data in ReactJS
body: <p>what is the right way in ReactJS to update and display the correct value.</p>
  
  <p>Example: I show data on the screen from a database. When I change the values in the database I want to see the new values directly on the screen.</p>
  
  <p>I have two files:</p>
  
  
  
  <pre class="lang-js prettyprint-override"><code>class Parent extends React.Component {
    constructor(props) {
      super(props);
  
      this.state = {
          containers: []
      };
  }
  
  componentDidMount() {
      var self = this;
  
      axios.get('http://reactlaravel.dev/container/count').then(function (response) {
          self.setState({
              containers: response.data
          });
      })
  }
  
  render() {
      const containers = this.state.containers.map( (container, i) =&gt; &lt;StockCount key={i} {...container} /&gt; );
  
      return (
          &lt;div&gt;
              {containers}
          &lt;/div&gt;
      )
  }
  
  const Container = ({ name, total, current }) =&gt; (
  &lt;div&gt;
      &lt;span&gt;{name}&lt;/span&gt;
      &lt;span&gt;{total}&lt;/span&gt;
      &lt;span&gt;{current}&lt;/span&gt;
  &lt;/div&gt;
  );
  
  ReactDOM.render(
      &lt;Parent /&gt;,
      document.getElementById('app')
  );
  </code></pre>
  
  <p>And the second file:</p>
  
  <pre class="lang-js prettyprint-override"><code>export class StockCount extends React.Component {
      render() {
          const currentBar = this.props.current;
          const totalBar = this.props.total;
          const progressBar = currentBar / totalBar * 100;
  
          return (
              &lt;div className="container"&gt;
                  &lt;h1&gt;{this.props.current} - {this.props.total} -  {this.props.name}&lt;/h1&gt;
  
              &lt;div className="progress"&gt;
                  &lt;div className={progressBarType} role="progressbar" aria-valuenow={progressBar} aria-valuemin="0" aria-valuemax="100" style={style}&gt;
                      &lt;span className="sr-only"&gt;{progressBar}% Complete (success)&lt;/span&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      );
  }
  </code></pre>