CODEWITHSUNDEEP
reactjs
Hemal
Hemal

Reputation: 31

react bootstrap table error Uncaught TypeError: this.refs.innerDiv.setAttribute is not a function

I am looking for a simple bootstrap react table component with add, edit, delete row functionality. I tried to use this with my existing react application but stuck at following error.

Uncaught TypeError: this.refs.innerDiv.setAttribute is not a function

Table does get displayed but due to above error, nothing works after that. Here is the code.enter code here

import React from 'react';
//import {BootstrapTable, TableHeaderColumn} from 'react-bootstrap-table';
import AppointmentActionCreator from '../actions/AppointmentActionCreators';
var ReactBsTable = require("react-bootstrap-table");
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;
var products = [];
function addProducts(quantity) {
  var startId = products.length;
  for (var i = 0; i < quantity; i++) {
    var id = startId + i;
    products.push({
      id: id,
      name: "Item name " + id,
      price: 2100 + i
    });
  }
}
addProducts(5);
export default class BasicTable extends React.Component{
 constructor() {
    super()
    this.state = {
      appointments: ''
    };
    AppointmentActionCreator.getAppointments();
  }
  render(){
    return (
      <div>
        <BootstrapTable data={products} striped={true} hover={true} condensed={true}>
          <TableHeaderColumn dataField="id" isKey={true}>Product ID</TableHeaderColumn>
          <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
          <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
        </BootstrapTable>
      </div>
    );
  }
};

Upvotes: 0

Views: 1385

Answers (2)

Hemal
Hemal

Reputation: 31

Some how react-bootstrap module was creating issue. I removed it from project along with react module. Reinstall react and react-bootstrap modules to resolve this issue. I still do not know what was the cause of it but I resolved it this way. I believe latest version of react or react-bootstrap played a part with solution. Thanks to Allen Fang of react-bootstrap-table.

Upvotes: 1

user2341388
user2341388

Reputation: 29

Looking at the source code for the git project, this.refs.innerDiv.setAttribute("data-field", this.props.dataField); is called during the componentDidMount phase for the TableHeaderColumns. Try setting the product array inside the constructor of the class - the render method may being called before your addProducts function is called - meaning the data array is initially empty.

Upvotes: 0

Related Questions