Getting error while refreshing react-bootstrap-table using same data set

[patelkardam]

Below is my code snippet:

import React, {Component} from 'react'; import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table'; import { Table } from 'reactstrap';

class AccountSearchResultPage extends Component {

onRowClick(row) { console.log('selected row is :' + row.accountNumber); var acctNumber = row.accountNumber; this.props.setSelectedAccount(acctNumber); };

render() {

const selectRowProp = {
  mode: 'radio',
  clickToSelect: true,
  bgColor: '#fefefe',
  onSelect: this.onRowClick.bind(this)
};

const options = {
  page: 0,  // which page you want to show as default
  sizePerPageList: [ {
    text: '5', value: 5
  }, {
    text: '10', value: 10
  }, {
    text: 'All', value: this.props.productList.length
  } ], // you can change the dropdown list for size per page
  sizePerPage: 3,  // which size per page you want to locate as default
  pageStartIndex: 0, // where to start counting the pages
  paginationSize: 3,  // the pagination bar size.
  prePage: 'Prev', // Previous page button text
  nextPage: 'Next', // Next page button text
  firstPage: 'First', // First page button text
  lastPage: 'Last', // Last page button text
  paginationShowsTotal: 3, // Accept bool or function
  hideSizePerPage: true

};

return (
  <div>
    <Table id="custom">
      <thead class="thead-dark">
        <tr>
          <th colspan="2">Account LookUp</th>
        </tr>
      </thead>
      <tbody>
        <tr>
          <BootstrapTable refs='table' data={this.props.productList} selectRow={selectRowProp} pagination='true' options={options} >
            <TableHeaderColumn dataField='accountNumber' isKey='true'>Account Number</ TableHeaderColumn>
            <TableHeaderColumn dataField='name'>Primary Name</ TableHeaderColumn>
            <TableHeaderColumn dataField='ssn'>SSN/Tax ID</ TableHeaderColumn>
            <TableHeaderColumn dataField='state'>State</ TableHeaderColumn>
            <TableHeaderColumn dataField='zip'>Zip Code</ TableHeaderColumn>
          </ BootstrapTable>
        </tr>
      </tbody>
    </Table>
  </div>
);

} }

export default AccountSearchResultPage;

First time when my component is render that time it shows data ({this.props.productList} ) on table. But if i try to refresh this component again then i am getting error

[patelkardam]

Uncaught TypeError: Cannot read property 'accountNumber' of undefined The above error occurred in the component: in TableBody (created by BootstrapTable) in div (created by BootstrapTable) in div (created by BootstrapTable) in BootstrapTable (created by AccountSearchResultPage) in tr (created by AccountSearchResultPage) in tbody (created by AccountSearchResultPage) in table (created by Table) in Table (created by AccountSearchResultPage) in div (created by AccountSearchResultPage) in AccountSearchResultPage (created by InBoundCallPage) in div (created by Container) in Container (created by InBoundCallPage) in row (created by InBoundCallPage) in div (created by InBoundCallPage) in div (created by InBoundCallPage) in div (created by InBoundCallPage) in InBoundCallPage (created by HomePage) in div (created by HomePage) in div (created by HomePage) in main (created by HomePage) in HomePage (created by App) in div (created by App) in App in Router (created by BrowserRouter) in BrowserRouter in AppContainer

React will try to recreate this component tree from scratch using the error boundary you provided, AppContainer. TypeError: Cannot read property 'accountNumber' of undefined(…) [WDS] App updated. Recompiling... [WDS] App hot update... [HMR] Checking for updates on the server... [HMR] Updated modules:

[Lokbista]

I have exactly same problem. can someone help, please?

[pragithub1]

please make the "pageStartIndex: 0" to " pageStartIndex: 1" in Options. It's working for me.

[Lokbista]

Thanks, I did and it worked.

On Thu, Feb 27, 2020 at 9:10 AM Prakash Rayamajhi notifications@github.com wrote:

please make the "pageStartIndex: 0" to " pageStartIndex: 1" in Options. It's working for me.

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/AllenFang/react-bootstrap-table/issues/1955?email_source=notifications&email_token=ACBVK4J4B25LEFFYTPTDHJTRE7CWZA5CNFSM4E4POXN2YY3PNVWWK3TUL52HS4DFVREXG43VMVBW63LNMVXHJKTDN5WW2ZLOORPWSZGOENERACI#issuecomment-591990793, or unsubscribe https://github.com/notifications/unsubscribe-auth/ACBVK4KLSLNM4GP34BHBKGDRE7CWZANCNFSM4E4POXNQ .

-- Thanks, Lok