CODEWITHSUNDEEP
javascripttwitter-bootstrapreactjsdatatables
Federico Giust
Federico Giust

Reputation: 1793

React Datatables error

I'm just starting with React and found your component and trying to see if it works for what I need to do, but I'm trying to follow the getting started example using babel in browser and a static webserver but keep getting this kind of errors in Chrome

React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

This is my index.html

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title></title>
    <script src="bower_components/jquery/dist/jquery.min.js"></script>
    <script src="bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="bower_components/react/react.js"></script>
    <script src="bower_components/react/react-dom.js"></script>
    <script src="vendor/js/react-bootstrap-table.js"></script>
    <script src="https://npmcdn.com/[email protected]/browser.min.js"></script>
    <script src="js/app.js" type="text/babel"></script>
    <link rel="stylesheet" type="text/css" href="vendor/css/react-bootstrap-table.css">
</head>
<body>
   <div id="basic"></div>
</body>
</html>

This is my app.js (as taken from react-bootstrap-table)

'use strict';

var ReactBsTable = window.BootstrapTable;
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

// products will be presented by ReactBsTable
var products = [
  {
      id: 1,
      name: "Product1",
      price: 120
  },{
      id: 2,
      name: "Product2",
      price: 80
  },{
      id: 3,
      name: "Product3",
      price: 207
  },{
      id: 4,
      name: "Product4",
      price: 100
  },{
      id: 5,
      name: "Product5",
      price: 150
  },{
      id: 6,
      name: "Product1",
      price: 160
  }
];

React.render(
  <BootstrapTable data={products} striped={true} hover={true}>
      <TableHeaderColumn isKey={true} dataField="id">Product ID</TableHeaderColumn>
      <TableHeaderColumn dataField="name">Product Name</TableHeaderColumn>
      <TableHeaderColumn dataField="price">Product Price</TableHeaderColumn>
  </BootstrapTable>,
    document.getElementById("basic")
);

Here's a jsfiddle version

Any idea what am I missing or doing wrong?

Upvotes: 0

Views: 329

Answers (2)

QoP
QoP

Reputation: 28397

You are getting that error because ReactBsTable.TableHeaderColumn & ReactBsTable.BootstrapTable are returning undefined.

This

var ReactBsTable = window.BootstrapTable;
var BootstrapTable = ReactBsTable.BootstrapTable;
var TableHeaderColumn = ReactBsTable.TableHeaderColumn;

should be

var BootstrapTable = window.BootstrapTable;
var TableHeaderColumn = window.TableHeaderColumn;

Also, you have to use ReactDOM.render() instead of React.render()

fixed jsfiddle

Upvotes: 2

Tarang Dave
Tarang Dave

Reputation: 331

Instead of using React.render() try to use ReactDOM.render(). Well it also depends on which react version you are using.

Upvotes: 2

Related Questions