Pagination not working in react-bootstrap-table2 - reactjs

Question

I am using react-bootstrap-table2-paginator for adding Pagination to my BootstrapTable. I get the below error when I add the Pagination part in the table. Am I missing some imports or something ?
invariant.js:39 Uncaught Error: a.render(): A valid ReactComponent must be returned. You may have returned undefined, an array or some other invalid object.
Here is the code for the component.
import React, { Component } from 'react';
import BootstrapTable from 'react-bootstrap-table-next';
import cellEditFactory from 'react-bootstrap-table2-editor';
import paginationFactory from 'react-bootstrap-table2-paginator';
class OverviewComponent extends Component {
constructor(props) {
super(props);
}
const products = [];
const columns = [{
dataField: 'id',
text: 'Product ID'
}, {
dataField: 'name',
text: 'Product Name'
}, {
dataField: 'price',
text: 'Product Price'
}];
function addProducts(quantity) {
const startId = products.length;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
products.push({
id: id,
name: 'Item name ' + id,
price: 2100 + i
});
}
}
addProducts(12);
render() {
return (
<div className="container-fluid">
<div className="row">
<BootstrapTable
striped
hover
condensed
maxHeight={15}
keyField="id"
data={ products }
columns={ columns }
cellEdit={ cellEditFactory({ mode: 'dbclick' }) }
pagination={ paginationFactory() }
/>
</div>
</div>
);
}
}
export default OverviewComponent;
Any help would be appreciated.
Thanks

Answer 1

I've corrected some faults with the original implementation. You want to make use of this.state
import React, { Component } from "react";
import BootstrapTable from "react-bootstrap-table-next";
import cellEditFactory from "react-bootstrap-table2-editor";
import paginationFactory from "react-bootstrap-table2-paginator";
class OverviewComponent extends Component {
constructor(props) {
super(props);
this.state = {
products: [],
columns: [
{
dataField: "id",
text: "Product ID"
},
{
dataField: "name",
text: "Product Name"
},
{
dataField: "price",
text: "Product Price"
}
]
};
this.addProduct = this.addProduct.bind(this);
}
addProduct(quantity) {
const startId = products.length;
let { products } = this.state;
for (let i = 0; i < quantity; i++) {
const id = startId + i;
products.push({
id: id,
name: "Item name " + id,
price: 2100 + i
});
}
this.setState({ products: products });
}
render() {
const { products, columns } = this.state;
return (
<div className="container-fluid">
<div className="row">
<BootstrapTable
striped
hover
condensed
maxHeight={15}
keyField="id"
data={products}
columns={columns}
cellEdit={cellEditFactory({ mode: "dbclick" })}
pagination={paginationFactory()}
/>
</div>
</div>
);
}
}
export default OverviewComponent;

Answer 2

Try this, it worked for me. I also had a problem with the wrapper at runtime.
npm install react-bootstrap-table2-paginator#0.1.6 --save
Also, this only works for react#16.0.0 and up. You can upgrade to the latest version of react and react-dom with this:
npm install --save react#latest react-dom#latest
for specific version just specify the version in place of the word latest. eg
npm install --save react#16.4.2 react-dom#16.4.2