ReactJS - access to props child in render for props transfer - reactjs

Question

When I try to access {this.props} in render, it crashes my page. Am I doing something wrong here?
var React = require('react');
var DefaultLayout = React.createFactory(require('../layouts/Default'));
var ReactGridLayout = React.createFactory(require('react-grid-layout'));
var DesktopStore = require("../stores/DesktopStore");
var _ = require('lodash');
// var classNames = require('classnames');
var HomePage = React.createClass({
displayName: 'Index.jsx',
getInitialState: function(){
return {
zoomed: DesktopStore.get('zoom'),
layout: this.generateLayout()
};
},
getDefaultProps: function() {
return {
layout: DefaultLayout,
grid: {
items: 20,
cols: 80,
rowHeight: 30,
verticalCompact: false,
autoSize: false,
isResizable: false,
margin: [5,5]
}
};
},
generateGridDOM: function(){
return _.map(_.range(this.props.grid.items), function(i) {
return (<div key={i}><span className="text">{i}</span></div>);
});
},
generateLayout: function(){
var p = this.props;
var layout = _.map(new Array(p.grid.items), function(item, i) {
return {x: 0, y: 1, w: 1, h: 1, i: i};
});
return layout;
},
render: function() {
var parentClassString = "desktop";
if(this.state.zoomed){
parentClassString += " zoomed";
}
return (
var grid = this.props.grid; // this crashes the page
<div className={parentClassString}>
<ReactGridLayout className="gridLayout"
layout={this.state.layout} {...this.props.grid} > // this crashes the page
{this.generateGridDOM()}
</ReactGridLayout>
</div>
);
}
});
module.exports = HomePage;

Answer 1

You can't define that var grid = this.props.grid; within the return, put it before the return. The render method is just supposed to return a single root DOM node or React component.
If you look in the webpack build output it should point out the var is an unexpected token:
ERROR in ./file.js
Module build failed:
SyntaxError: Unexpected token (56:12)
54 |
55 | return (
56 | var grid = this.props.grid; // this crashes the page
| ^