Description
Search on page 1 is working fine but error when search on page 2/3/4/5, anyone facing same issue?
<PaginationProvider pagination={paginationFactory(pageOptions)} keyField='ID' columns={columns} data={this.state.dataReceipt} > {({ paginationProps, paginationTableProps }) => ( <ToolkitProvider keyField='ID' columns={columns} data={this.state.dataReceipt} search={{ placeholder: 'Find' }} > {toolkitProps => ( <React.Fragment> <Row className="mb-2"> <Col md="4"> <div className="search-box me-2 mb-2 d-inline-block"> <div className="position-relative"> <SearchBar placeholder={"Find"} {...toolkitProps.searchProps} /> <i className="bx bx-search-alt search-icon" /> </div> </div> </Col> </Row> <Row> <Col xl="12"> <div className="table-responsive"> <BootstrapTable keyField={"ID"} responsive bordered={false} striped={false} defaultSorted={defaultSorted} selectRow={selectRow} classes={ "table align-middle table-nowrap" } rowEvents={tableRowEvents} headerWrapperClasses={"thead-light"} {...toolkitProps.baseProps} {...paginationTableProps} /> </div> </Col> </Row> <Row className="align-items-md-center mt-30"> <Col className="inner-custom-pagination d-flex"> <div className="d-inline"> <SizePerPageDropdownStandalone {...paginationProps} /> </div> <div className="text-md-right ms-auto"> <PaginationListStandalone {...paginationProps} /> </div> </Col> </Row> </React.Fragment> )} </ToolkitProvider> )} </PaginationProvider>
"react-bootstrap-table-next": "^4.0.3",
"react-bootstrap-table2-editor": "^1.4.0",
"react-bootstrap-table2-paginator": "^2.1.2",
"react-bootstrap-table2-toolkit": "^2.1.3",
Uncaught TypeError: Cannot read properties of undefined (reading 'ID')
at Function.get (utils.js:29:1)
at selection.js:25:1
at Array.map ()
at getSelectionSummary (selection.js:24:1)
at SelectionProvider.render (selection-context.js:145:1)
at finishClassComponent (react-dom.development.js:17485:1)
at updateClassComponent (react-dom.development.js:17435:1)
at beginWork (react-dom.development.js:19073:1)
at HTMLUnknownElement.callCallback (react-dom.development.js:3945:1)
at Object.invokeGuardedCallbackDev (react-dom.development.js:3994:1)
at invokeGuardedCallback (react-dom.development.js:4056:1)
at beginWork$1 (react-dom.development.js:23964:1)
at performUnitOfWork (react-dom.development.js:22776:1)
at workLoopSync (react-dom.development.js:22707:1)
at renderRootSync (react-dom.development.js:22670:1)
at performSyncWorkOnRoot (react-dom.development.js:22293:1)
at react-dom.development.js:11327:1
at unstable_runWithPriority (scheduler.development.js:468:1)
at runWithPriority$1 (react-dom.development.js:11276:1)
at flushSyncCallbackQueueImpl (react-dom.development.js:11322:1)
at flushSyncCallbackQueue (react-dom.development.js:11309:1)
at scheduleUpdateOnFiber (react-dom.development.js:21893:1)
at Object.enqueueSetState (react-dom.development.js:12467:1)
at ToolkitProvider.push../node_modules/react/cjs/react.development.js.Component.setState (react.development.js:365:1)
at ToolkitProvider.onSearch (context.js:88:1)
at SearchBar.js:70:1
at later (SearchBar.js:36:1)