React Datatables error
Question
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/babel-core@5.8.38/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?
2 answers
solution1
2 2016-08-24 16:30:16
Instead of using React.render() try to use ReactDOM.render(). Well it also depends on which react version you are using.
solution2
2 2016-08-24 16:54:47
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()
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.