title: react bootstrap table not rendering data without refresh
body: <p>i am using react-redux with react bootstrap table . my UI is given in picture . when i add payment the data is saved in database. i have used componentdidupdate and componentdidUpdate to render the props data . but nothing is working .  the table does not render the data without refresh . please help......................................................................................................</p>
  
  <p><a href="https://i.stack.imgur.com/7HWW7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/7HWW7.png" alt="my UI "></a></p>
  
  <pre><code>import React from 'react';
  import { connect } from 'react-redux';
  // import {bindActionCreators} from 'redux'
  import { Link } from 'react-router';
  import Messages from '../Messages';
  import classnames from 'classnames';
  import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
  import { getCrmOneCustomer, saveStatus, getCrmStatus } from '../../actions/crmAction';
  //--------------------------------------------------------------------------
  class CrmStatus extends React.Component {
      constructor(props) {
          super(props);
          this.state = {
              name: '', shop_name: '', crm_id: '', status: ''
          };
  
          this.props.dispatch(getCrmOneCustomer(this.props.params.id));
          this.handleChange = this.handleChange.bind(this);
          this.handleSubmit = this.handleSubmit.bind(this);
      }
  
  
      componentDidMount() {
           this.props.dispatch(getCrmStatus(this.props.params.id));
  
      }
  
      //--------------------------------------------------------------------------
      componentWillReceiveProps(newProps) {
          console.log('componentWillReceiveProps............ from edit');
          console.log(newProps)
          this.setState({
              name: newProps.CrmOne.name,
              shop_name: newProps.CrmOne.shop_name,
              status: newProps.CrmOne.status, 
  
          })
        }
      //--------------------------------------------------------------------------
      handleChange(event) {
          this.setState({
              [event.target.name]: event.target.value
          });
      }
      //--------------------------------------------------------------------------
      handleSubmit(event) {
          event.preventDefault();
          var Id = this.props.params.id;
          var obj = {};
          obj["crm_id"] = Id
          obj["name"] = this.state.name
          obj["shop_name"] = this.state.shop_name
          obj["status"] = this.state.status
          console.log(obj)
  
          this.props.dispatch(saveStatus(obj))
      }
      //--------------------------------------------------------------------------
  
      componentDidUpdate(){
  
          this.products = this.props.CrmOneStatus
      }
  
      render() {
  
  
          return (
              &lt;div className="container ca-container"&gt;
  
                  &lt;div className="row"&gt;
                      &lt;div className="col-md-12"&gt;
                      &lt;h2&gt;CRM Status&lt;/h2&gt;
  
  
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div className="row"&gt;
              &lt;div className="col-md-12"&gt;
  
              &lt;div className ="col-md-8"&gt;
              &lt;BootstrapTable data={this.products} striped hover pagination={true} search&gt;
              &lt;TableHeaderColumn isKey dataField='name'&gt;Name&lt;/TableHeaderColumn&gt;
              &lt;TableHeaderColumn dataField='status'&gt;status&lt;/TableHeaderColumn&gt;
              &lt;TableHeaderColumn dataField='createdAt'&gt;Date&lt;/TableHeaderColumn&gt;
              &lt;/BootstrapTable&gt;
              &lt;/div&gt;
              &lt;div className ="col-md-4"&gt;
              &lt;h4&gt; Add Payment  &lt;/h4&gt;
  
              &lt;form onSubmit={this.handleSubmit} encType="multipart/form-data"&gt;
  
              &lt;div className="form-group"&gt;
                    &lt;label&gt;
                      Name:
                 &lt;/label&gt;
                    &lt;input disabled type="text" className="form-control" name="name" value={this.state.name} onChange={this.handleChange} placeholder="Zahid Hasan" /&gt;
                  &lt;/div&gt;
                  &lt;div className="form-group"&gt;
                    &lt;label&gt;
                    shop name:
                  &lt;/label&gt;
                    &lt;input  type="text" className="form-control" name="shop_name" value={this.state.shop_name} onChange={this.handleChange} placeholder="amount" /&gt;
                  &lt;/div&gt;
  
                &lt;div className="form-group"&gt;
                &lt;label&gt;
                Status:
                &lt;/label&gt;
                &lt;textarea  rows="8" cols="50"  type="text" className="form-control" name="status" value={this.state.status} onChange={this.handleChange} placeholder="comment" /&gt;
                &lt;/div&gt;
                &lt;div className="btn-group" role="group"&gt;
                &lt;button type="submit" className="btn btn-success btn-lg"&gt;Submit&lt;/button&gt;
  
  
  
               &lt;/div&gt;
               &lt;/form&gt;
  
  
               &lt;/div&gt;
               &lt;/div&gt;
               &lt;/div&gt;
  
  
              &lt;/div&gt;
          );
      }
  }
  // ======================== REDUX CONNECTORS ========================
  const mapStateToProps = (state) =&gt; {
      return {
          CrmOne: state.crmCustomer.CrmOne,
          CrmOneStatus: state.crmCustomer.CrmOneStatus
      };
  };
  
  export default connect(mapStateToProps)(CrmStatus);
  </code></pre>