title: React Component Doesn't Refresh or Re-render
body: <p>setState is in use but DataTables doesn't refresh after Add or Edit function.
  Please focus on:</p>
  
  <ol>
  <li><strong>listOfCurrency</strong></li>
  <li>Function <strong>ws</strong></li>
  <li>Function <strong>onClickSubmitAddCurrency</strong></li>
  <li>Component <strong>JSTable</strong></li>
  <li>Tag <strong></strong> in JSTable.js</li>
  </ol>
  
  <p>Currency.js</p>
  
  <pre><code>   componentWillMount() {
      this.setState(
          {
              listOfCurrency: [],
              currency: { currency: '', symbol: '', status: '' },
              myCurrencyRate: { exchangeRate: 0, adminFee: 0 },
              currencyRateRequest:{exchangeRate:'',processFee:'',earnrate:'',earnAdminFee:''},
              myCurrency: { currency:''},
              isAdmin:false,
              message: '',
              snackbar: {
                  open: false,
                  vertical: null,
                  horizontal: null,
              },
  
          }
      );
  
      var checkAccessRightUrl=properties.domain+properties.checkAccessRightUrl;
      this.wsCheckUrlAccess(checkAccessRightUrl,'Currency');
  
      var wsListUrl = properties.domain + properties.currencyList;
      this.ws(wsListUrl, false, false, 'get', null, false,'list');
  
      var populateMyMembershipCurrencyRate = properties.domain + properties.populateMembeshipCurrencyRate;
      this.wsbind(populateMyMembershipCurrencyRate,'currencyRate');
  
      var myMembershipCurrency = properties.domain + properties.showMyMembershipCurrency;
      this.wsbind(myMembershipCurrency,'myMembershipCurrency');
  
      var checkIsAdminUrl = properties.domain + properties.populateCheckIsAdmin;
      this.wsbind(checkIsAdminUrl,'checkIsAdmin');
  }
  
  ws(wsurl, jsonLibrary, toggle, process, senditem, snackbar,processName) {
      var accessToken = sessionStorage.getItem('accessToken');
      var reqs;
      if (process === 'post') {
          reqs = Request.post(wsurl)//wsurl
      } else if (process === 'get') {
          reqs = Request.get(wsurl)//wsurl
      }
      reqs.set('Authorization', 'Bearer ' + accessToken)
          .set('Content-Type', 'application/json')
      if (senditem != null) {
          reqs.send(senditem)
      }
      reqs.end((err, res) =&gt; {
          if (res.status === 200) {
              if(processName === 'currencyRate'){
                  this.setState(
                      {
                          isLoading:false,
                          currencyRateRequest: res.body,
                          message: (res.body===null?'':res.body.message),
                          snackbar: {
                              vertical: 'top',
                              horizontal: 'right',
                              open: snackbar
                          },
                      }
                  );
              }else{
                  this.setState(
                      {
                          isLoading:false,
                          listOfCurrency: (jsonLibrary ? JSON.parse(JSON.stringify(res.body.responses)) : res.body),
  
                          message: (res.body===null?'':res.body.message),
                          snackbar: {
                              vertical: 'top',
                              horizontal: 'right',
                              open: snackbar
                          },
                      }
                  );
              }
  
              if (toggle) {
                  this.togglePrimary();
              }
  
          } else {
              this.checkSession(res);
              console.log('do logout function here');
              console.log(err);
          }
      });
  }
  
  onClickSubmitAddCurrency() {
      var wsListUrl = properties.domain + properties.addCurrency;
      this.ws(wsListUrl, true, true, 'post', this.state.currency, true);
  };
     render() {
      return (
          &lt;div className="animated fadeIn"&gt;
  
              &lt;CardBody&gt;
                  &lt;JSTable id='#currencyTable' 
                          dataSet={this.state.listOfCurrency} columns={columns} 
                          onEdit={this.onClickGotoEdit.bind(this)} onDelete={this.onClickSubmitDeleteCurrency.bind(this)} /&gt;
              &lt;/CardBody&gt;
  
          &lt;/div&gt;
      );
  }
  </code></pre>
  
  <p>JSTable.js</p>
  
  <pre><code>import React, { Component } from 'react';
  import { Card, CardBody, CardHeader, Col, Row,Button } from 'reactstrap';
  import '../../css/jquery.dataTables.css';
  import '../../css/dataTables.responsive.css';
  
  const $ = require('jquery');
  var ReactDOM = require('react-dom');
  $.Datatable = require('datatables.net-responsive');
  
  class JSTable extends Component {
  
  constructor(props) {
      super(props);
      this.state = {
          //ajaxurl    : props.ajaxurl,
          id      : props.id,
          dataSet : props.dataSet,
          columns : props.columns,
          onEdit  : props.onEdit,
          onDelete: props.onDelete,
          onTopUp : props.onTopUp,
          render  : {
              edit    :props.onEdit==null?{display:'none'}:{display:''},
              delete  :props.onDelete==null?{display:'none'}:{display:''},
              topup   :props.onTopUp==null?{display:'none'}:{display:''},
          },
          indicator:{
              edit    :props.onEdit==null?true:false,
              delete  :props.onDelete==null?true:false,
              topup   :props.onTopUp==null?true:false,
          }
      };
  }
  
  
  componentDidMount() {
  
      this.$el = $(this.el);
      this.$el.DataTable({
         // ajax: this.state.ajaxurl,
          data: this.state.dataSet,
          columns: this.state.columns,
          responsive: true,
          columnDefs: [{
              targets: 0,
              createdCell: (td, cellData, rowData, row, col) =&gt;
                  ReactDOM.render(
                      &lt;div&gt;
                          &lt;Button color="primary" style={this.state.render.edit} 
                              onClick={this.state.indicator.edit?this.empty:this.state.onEdit.bind(this.celldata,this,rowData,this.row,this.col)}
                               className="mr-1"&gt;Edit&lt;/Button&gt;
  
                          &lt;Button color="primary" style={this.state.render.delete}
                              onClick={this.state.indicator.delete?this.empty:this.state.onDelete.bind(this.celldata,this,rowData,this.row,this.col)}
                               className="mr-1"&gt;Delete&lt;/Button&gt;
  
                          &lt;Button color="primary" style={this.state.render.topup}
                              onClick={this.state.indicator.topup?this.empty:this.state.onTopUp.bind(this.celldata,this,rowData,this.row,this.col)} 
                              className="mr-1"&gt;Top Up&lt;/Button&gt;
                      &lt;/div&gt;, td
                  ),
  
              }
          ],
  
      });
  
  }
  
  // componentWillUnmount() {
  //     this.$el.DataTable.destroy(true);
  // }
  
  empty(){
      console.log('===========no function=================');
  }
  render() {
      return (
          &lt;div className="animated fadeIn"&gt;
              &lt;table data={this.state.dataSet} className="display" width="100%" ref={el =&gt; this.el = el}&gt;
  
              &lt;/table&gt;
          &lt;/div&gt;
      );
  }
  
  }
  
  export default JSTable;
  </code></pre>
  
  <p>I can get the update data. However, it doesn't update the table. Unless I refresh the page.</p>
  
  <p>Please advise.</p>