Cannot read property 'id' of undefined + The above error occurred in the <SelectionProvider> component:

[smchauhan]

Hi Allen,

The bug
I want all these functionalities in single table searching in all fields + paging, it works fine for the first time, but after navigating to another page and searching for something generates error. for your reference have added code snippet and error,

Code Snippet

import paginationFactory, { PaginationProvider, PaginationListStandalone } from 'react-bootstrap-table2-paginator';
import ToolkitProvider, { Search } from 'react-bootstrap-table2-toolkit';
import { tableData } from '../../../data/blog/BlogPostData';

const columns = [
    {   dataField: 'id',        text: 'Id'      },
    {   dataField: 'category',  text: 'Category' }, 
    {   dataField: 'slug',      text: 'Slug'    }, 
    {   dataField: 'posts',     text: 'Posts'   },
    {   dataField: 'date_created',  text: 'Date Created'    },
    {   dataField: 'date_updated',  text: 'Date Updated'    },
];
const options = {
    custom: true,
    paginationSize: 4,
    pageStartIndex: 1,
    firstPageText: 'First',
    prePageText: 'Prev',
    nextPageText: 'Next',
    lastPageText: 'Last',
    nextPageTitle: 'First page',
    prePageTitle: 'Pre page',
    firstPageTitle: 'Next page',
    lastPageTitle: 'Last page',
    showTotal: true,
    totalSize: tableData.length
  };
const contentTable = ({ paginationProps, paginationTableProps }) => (
    <div>
      <ToolkitProvider
        keyField="id"
        columns={ columns }
        data={ tableData}
        search
      >
        {
          toolkitprops => (
            <div className="post-table">              
              <SearchBar { ...toolkitprops.searchProps } className="search-bar m-4" placeholder="Search Post" /> 
              <div className="table-responsive">
                  <BootstrapTable
                selectRow={ selectRow }
                bordered={ false }  
                { ...toolkitprops.baseProps }
                { ...paginationTableProps }
              />
              </div>
            </div>
          )
        }
      </ToolkitProvider>      
      <PaginationListStandalone { ...paginationProps } />      
    </div>
  );

const BlogPost= () => {
return (
        <Fragment>
           <PaginationProvider
             pagination={
                  paginationFactory(options)
              }
             >
              { contentTable }
           </PaginationProvider>
     </Fragment>
    )
};
export default BlogPost;

To Reproduce
Steps that generate errors:

1. Enter value in Search bar ( It works fine )
2. Navigate to page 2..3...or X
3. Again enter value in Search bar ( It generate error with blank screen )
4. See error below show in my console.

Error Screenshots
If applicable, add screenshots to help explain your problem.

1. https://prnt.sc/1mt2mvr
2. https://prnt.sc/1mt2upq
3. https://prnt.sc/1mt9yhe

[bfricka]

Same issue here. I've tried specifically defining the selected keys on selectRow, but it doesn't fix it. Basically this issue occurs when navigating to a new page and then changing the data. Quite a substantial oversight, as it doesn't allow the case of selecting and filtering to work with pagination.

I'm now going to try to find a workaround, and I'd consider making a PR fix, but this repo doesn't seem like it is being maintained.

[smchauhan]

@bfricka Thanks a lot, I am also trying to fix it, I will post here if I can fix it, between if you find any solution, plz post the solution here. Thanks again :)

[myapos]

Hello, I had a similar issue and did a short investigation on it. I found the following

In the node_modules/react-bootstrap-table-next/lib/src/utils.js there is get function that accepts two parameters (target, field) as it is shown below

function get(target, field) {
  var directGet = target[field];
  if (directGet !== undefined && directGet !== null) {
    return directGet;
  }

  var pathArray = splitNested(field);
  var result = void 0;
  try {
    result = pathArray.reduce(function (curr, path) {
      return curr[path];
    }, target);
  } catch (e) {}
  return result;
}

The problem is that in some cases the target parameter is undefined and that throws that error.

So I wrapped the entire body function inside the try/catch block in order to catch the error as it is shown below

function get(target, field) {
var result = void 0;
  try {
  var directGet = target[field];
  if (directGet !== undefined && directGet !== null) {
    return directGet;
  }

  var pathArray = splitNested(field);
    result = pathArray.reduce(function (curr, path) {
      return curr[path];
    }, target);
  } catch (e) {}
  return result;
}

I hope that this will be useful to you too. This is not a proper fix though. The developers of the library has to take a look at it :)

[sandipthemes]

Thanks @myapos will check with that solution, between for the current project I have implemented https://react-table.tanstack.com/ package.

[guizombas]

Had the same error related in the issue #1660. My solution was the same as @myapos, also made the pull request (#1662), but had no response and it hasn't been merged.

[myapos]

I made a PR too. I hope the developers will merge at least one of them. It is a simple fix.

[ardynugraha]

@smchauhan @sandipthemes

[ahmedalatawi]

Faced same issue and implemented my own pagination component

and here how I'm using it.

[chsunilkumar33]

I am facing the same issue what is the solution

[Huzaifaahmed20]

Faced same issue and implemented my own pagination component

and here how I'm using it.

This just works great, thanks for this

[kamenpalyov]

In case you are using pagination that need to fetch new data from the api on page change you need to enable the "remote" prop and you need to handle onTableChange by yourself. documentation

[KirtiN10]

Just pass - remote={{pagination: true } } in BootstrapTable. It will work