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

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:

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

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

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.

@bfricka

@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 :)

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 :)

Fix for issue react-bootstrap-table#1669

@myapos

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

@myapos

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.

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

@smchauhan

@smchauhan @sandipthemes

Faced same issue and implemented my own pagination component

and here how I'm using it.

I am facing the same issue what is the solution

Faced same issue and implemented my own pagination component

and here how I'm using it.

This just works great, thanks for this

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

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

Navigation Menu

Repository navigation

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

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

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

Description

Activity

bfricka commented on Sep 1, 2021

smchauhan commented on Sep 2, 2021

myapos commented on Dec 12, 2021

sandipthemes commented on Dec 13, 2021

guizombas commented on Dec 14, 2021

myapos commented on Dec 14, 2021

ardynugraha commented on Jan 24, 2022

ahmedalatawi commented on May 7, 2022

chsunilkumar33 commented on May 31, 2022

Huzaifaahmed20 commented on Dec 29, 2022

kamenpalyov commented on Mar 8, 2023

KirtiN10 commented on Mar 9, 2023

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions