Pagination not working in react-bootstrap-table2

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

Hi all , I have the exact same issue. Bootstraptable 2 works correctly but as soon as i included paginator , I get error at runtime. Thx — SmoothyBoothy, May 29 '18 at 03:17

score 0 · Answer 1 · answered Apr 17 '18 at 22:42

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;

Ace · Answer 2 · 2018-09-05T09:23:59.763

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

Pagination not working in react-bootstrap-table2

2 Answers2