CODEWITHSUNDEEP
reactjs
Mohammed Ismail
Mohammed Ismail

Reputation: 55

Getting error message for react-bootstrap-table

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;

Upvotes: 0

Views: 4695

Answers (2)

Drew Reese
Drew Reese

Reputation: 202706

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

Upvotes: 1

Zohaib Ijaz
Zohaib Ijaz

Reputation: 22885

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>
    );
  }
}

Upvotes: 0

Related Questions