title: React: How to refresh the data in the table after button click
body: <p>I am trying to setup a refresh button so that when end user creates a new ticket i should be able to see the newly created ticket when i press refresh button. I am making use of Apollo client to get data from graphql server. I wonder how should i refresh my table i tried <code>forceUpdate</code> and <code>this.setState()</code>, i verified that it works by putting <code>{Math.random()}</code> in render function, however, it does not refresh and give new data, also tried putting the refresh button in button.js still issue is persisting. <code>window.location.reload()</code> works but that is not what i want, Is there something react can do like any lifecycle hook, i tried:</p>
  
  <pre><code>componentWillReceiveProps(nextProps) {
    if(this.props.ticket !== nextProps.ticket) {
       console.log(this.props.ticket)
    }
  }
  </code></pre>
  
  <p>in table.js but it didn't do the trick or i have to make use of some Apollo client API. Please suggest, thanks in advance.    </p>
  
  <p>App.js</p>
  
  <pre><code>class App extends Component {
    constructor(props) {
      super(props);
      this.handleRefresh =  this.handleRefresh.bind(this);
  
    }
  
    handleRefresh()  {
      this.forceUpdate();
    }
  
    render() {
      const { data: {loading, getTickets}} = this.props;
      if(loading) {
        return &lt;h4&gt;Loading..&lt;/h4&gt;
      }
  
      const Data = getTickets.map((ticket, id) =&gt; {
         return &lt;Table ticket={ticket} key={id} /&gt;
      })
  
  
      return (
        &lt;div className="App"&gt;
          &lt;header className="App-header"&gt;
            &lt;Header /&gt;
            &lt;Button className="lookup" bsStyle="info" bsSize="xsmall" 
  onClick={this.handleRefresh}&gt;&lt;h5&gt;lookup 1&lt;/h5&gt;&lt;/Button&gt;&lt;br/&gt;&lt;br/&gt;
                &lt;div className="container" style={{overflowX:"auto"}}&gt;
                  &lt;div className="table-responsive"&gt;
                    &lt;table className="table table-bordered table-hover"&gt;
                            &lt;thead&gt;
                              &lt;tr&gt;
                                &lt;th&gt;TicketID&lt;/th&gt;
                                &lt;th&gt;Name&lt;/th&gt;
                                &lt;th&gt;Comment&lt;/th&gt;
                                &lt;th&gt;EmpID&lt;/th&gt;
                              &lt;/tr&gt;
                            &lt;/thead&gt;
                            &lt;tbody&gt;
                                {Data}
                            &lt;/tbody&gt;
                      &lt;/table&gt;
                 &lt;/div&gt;
                 &lt;h4&gt;Random number : {Math.random()}&lt;/h4&gt;
                &lt;/div&gt;
              &lt;/header&gt;
            &lt;/div&gt;
          );
      }
      }
  
      export default compose(
       graphql(GetTickets)
      )(App);
  </code></pre>
  
  <p>table.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import PropTypes from 'prop-types';
  
  
  class Table extends Component {
      constructor(props) {
          super(props);
  
      }
  
      render() {
          return (
            &lt;tr&gt;
                  &lt;td&gt;{this.props.ticket.ticketID}&lt;/td&gt;
                  &lt;td&gt;{this.props.ticket.name}&lt;/td&gt;
                  &lt;td&gt;{this.props.ticket.comment}&lt;/td&gt;
                  &lt;td&gt;{this.props.ticket.EmpID}&lt;/td&gt;
            &lt;/tr&gt;
  
          )
      }
  }
  
  
  Table.propTypes = {
      ticketID: PropTypes.number,
      name: PropTypes.string,
      EmpID: PropTypes.number,
      comment: PropTypes.string
  }
  
  
  export default Table;
  </code></pre>