Getting error message for react-bootstrap-table

Question

I have installed "react-bootstrap-table2" via npm and I have write a sample code for table but when I run this code and getting an error message in browser console as

Uncaught TypeError: Cannot read property 'filter' of undefined at new BootstrapTableContainer (index.js:96)

import React, { Component } from 'react';
import 'react-bootstrap-table-next/dist/react-bootstrap-table2.min.css';
import BootstrapTable from 'react-bootstrap-table-next';

class UserList 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'
      }];
  }

  render() {
    return (
      <div>
        <BootstrapTable
          keyField='id'
          data={this.products}
          columns={this.columns}
        />
      </div>
    );
  }
}

export default UserList;

Drew Reese · Accepted Answer · 2020-04-14 06:09:55Z

1

When defined in the constructor class variables aren't defined with const, but instead defined on this.

constructor(props) {
  super(props);
  this.products = [];
  this.columns = [{
      dataField: 'id',
      text: 'Product ID'
    }, {
      dataField: 'name',
      text: 'Product Name'
    }, {
      dataField: 'price',
      text: 'Product Price'
    }];
}

answered Apr 14, 2020 at 6:09

Drew Reese

207k19 gold badges280 silver badges292 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Zohaib Ijaz · Accepted Answer · 2020-04-14 06:07:21Z

You have not assigned anything to this.products in constructor

class UserList extends Component {

  constructor(props) {
    super(props);
    // const products = []; 
    this.products = []; // this.products should be assigned some value/array
    const columns = [{
        dataField: 'id',
        text: 'Product ID'
      }, {
        dataField: 'name',
        text: 'Product Name'
      }, {
        dataField: 'price',
        text: 'Product Price'
      }];
  }

  render() {
    return (
      <div>
        <BootstrapTable
          keyField='id'
          data={this.products}
          columns={this.columns}
        />
      </div>
    );
  }
}

That may work but not a good approach. data should be in state variable so when you update the state your component will be re-rendered and new changes will be shown otherwise updating this.products will not trigger re-render and component will show outdated data.

class UserList extends Component {

  constructor(props) {
    super(props);
    // const products = [];
    this.state = { products: [] };
    const columns = [{
        dataField: 'id',
        text: 'Product ID'
      }, {
        dataField: 'name',
        text: 'Product Name'
      }, {
        dataField: 'price',
        text: 'Product Price'
      }];
  }
  
  componentDidMount = async () => {
    // Get data from some api and then update the state
    const res = await fetch('/some url');
    const products = await res.json();
    this.setState({ products });
  }

  render() {
    return (
      <div>
        <BootstrapTable
          keyField='id'
          data={this.products}
          columns={this.columns}
        />
      </div>
    );
  }
}

Collectives™ on Stack Overflow

Getting error message for react-bootstrap-table

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related