title: How do I get BootstrapTable to redraw with updated data?
body: <p>I have a Table from <a href="https://react-bootstrap.github.io/" rel="nofollow noreferrer">react-bootstrap</a> that displays a list of devices with several columns. I want to change this so you can reorder by the columns so I switched to BootstrapTable from <a href="https://react-bootstrap-table.github.io/react-bootstrap-table2/" rel="nofollow noreferrer">react-bootstrap-table-next</a>. But my problem is that changing the state of the Component doesn't cause the table to update - this only happens if I click on a column to reorder the table.</p>
  <p>The code is written to create the <code>devices_table</code> and save it to state then call an API to get the device version and add that to the state, causing the component to redraw. But when <code>render()</code> is called again the additional data isn't added to the table.</p>
  <p>I've created a working example at <a href="https://codesandbox.io/s/react-bootstrap-table-next-new-data-problem-5w0op" rel="nofollow noreferrer">https://codesandbox.io/s/react-bootstrap-table-next-new-data-problem-5w0op</a></p>
  <pre><code>import React, { Component } from 'react'
  import BootstrapTable from 'react-bootstrap-table-next'
  
  class DeviceTable extends Component {
  
      constructor(props) {
          super(props)
  
          this.state = {
              devices_table: {}
          }
      }
  
      componentDidUpdate(prevProps) {
          if (prevProps.devices !== this.props.devices) {
              let devices_table = this.props.devices.map(this.myFunction);
              this.setState({
                  devices_table: devices_table
              })
          }
      }
  
      myFunction = (value, index, array) =&gt; {
          let device = {};
  
          device.device = value;
          device.index = index + 1;
          device.version = '';
  
          apiGetDeviceVersion(value.identifier)
              .then((res, deviceId = value.identifier) =&gt; {
                  let devices_table = this.state.devices_table;
                  let objIndex = devices_table.findIndex(d =&gt; d.device.identifier === deviceId)
                  devices_table[objIndex].version = res.valueReported;
                  this.setState({
                      devices_table: devices_table
                  })
              })
              .catch(e =&gt; {
                  console.log(e)
              })
  
          return device;
      }
  
      render() {
          const devices = this.state.devices_table;
          if (isEmpty(devices)) {
              return (&lt;div&gt;&lt;/div&gt;)
          }
          let columns = [
              {
                  text: &quot;#&quot;,
                  dataField: &quot;index&quot;,
                  sort: true
              },
              {
                  text: &quot;ID&quot;,
                  dataField: &quot;device.identifier&quot;,
                  sort: true
              },
              {
                  text: &quot;Name&quot;,
                  dataField: &quot;device.name&quot;,
                  sort: true
              },
              {
                  text: &quot;Status&quot;,
                  dataField: &quot;device.status&quot;,
                  sort: true
              },
              {
                  text: &quot;Version&quot;,
                  dataField: &quot;version&quot;,
                  sort: true
              }
          ];
  
          return (
              &lt;div&gt;
                  &lt;BootstrapTable keyField={&quot;device.identifier&quot;} data={devices} columns={columns}&gt;&lt;/BootstrapTable&gt;
              &lt;/div&gt;
          )
      }
  }
  
  export default DeviceTable
  </code></pre>