Node.js React: cannot add property context, object does not expand
I am currently trying to implement an isomorphic react component in my node.js + express layout. However, when I try to include the specified component in my jade template to render it, I get this error: TypeError: Cannot add property context, object does not expand
Here is my routes file:
var express = require('express');
var router = express.Router();
var React = require('react/addons'),
ReactApp = React.createFactory(require('../../react/components/ReactApp'));
/* GET home page. */
router.get('/', function(req, res, next) {
var reactAppEl = ReactApp();
console.log(reactAppEl);
var reactHtml = React.renderToString(reactAppEl);
res.render('index', { reactOutput: reactHtml });
});
module.exports = router;
Component:
/** @jsx React.DOM */
var React = require('react/addons');
/* create factory with griddle component */
var Griddle = React.createFactory(require('griddle-react'));
var fakeData = require('../data/fakeData.js').fakeData;
var columnMeta = require('../data/columnMeta.js').columnMeta;
var resultsPerPage = 200;
var ReactApp = React.createClass({
componentDidMount: function () {
console.log(fakeData);
},
render: function () {
return (
<div id="table-area">
<Griddle results={fakeData}
columnMetadata={columnMeta}
resultsPerPage={resultsPerPage}
tableClassName="table"/>
</div>
)
}
});
/* Module.exports instead of normal dom mounting */
module.exports = ReactApp;
Also my gulp task raises a warning Warning: Component (...): No method render
on returned component instance: you may have forgotten to define render
in your component, or you may have accidentally tried to display an element whose type is a function that is not a React component ... Warning. Don't set the props property of the React element. Instead, provide the correct value when you initially create the item.
Can anyone help me? Many thanks
By adding a call react.createFactory()
around griddle-react
, you will see that you are using plain JavaScript instead of JSX. So you have to use JavaScript function for Griddle in the subsequent render function:
return Griddle({results: fakeData,
columnMetadata: columnMeta,
resultsPerPage: resultsPerPage,
tableClassName: "table"});
If you want to use the JSX syntax you already have, just require griddle-react
without calling react.createFactory()
.