In the react-grid-layout/build/utils.js file I am getting an exception on the line return c.key when I resize a grid element saying:
"Uncaught TypeError: Cannot read property 'key' of null"
function childrenEqual(a, b) {
return (0, _lodash2.default)(_react2.default.Children.map(a, function (c) {
return c.key;
}), _react2.default.Children.map(b, function (c) {
return c.key;
}));
}
Here is some of my code:
const renderDBDataviewCard = (dbDataview) => {
const currIndex = get(dbDataview, "layout[0].i");
console.log(currIndex);
return killCardIndex !== currIndex && (
<Card className={classes.childCard} key={currIndex}>
<DashboardDataviewCard
classes={classes}
dbDataview={dbDataview}
/>
</Card>
);
};
const layout = map(dbDataviews, d => d.layout[0]);
return (
<ReactGridLayout
className="layout"
layout={layout}
onResizeStart={resizeStart}
onResizeStop={resizeStop}
onLayoutChange={handleLayoutChange}
cols={12}
width={100}
rowHeight={50}
margin={[16, 16]}
>
{map(dbDataviews, renderDBDataviewCard)}
</ReactGridLayout>
);
And an example layout object:
[
{
"isResizable": true,
"isDraggable": true,
"maxH": 12,
"minW": 5,
"h": 5,
"i": "1",
"minH": 8,
"w": 9,
"x": 0,
"y": 14
}
]
I am not sure why this is happening. Hopefully you have some insights into this problem.
I found out a little more info. In ReactGridLayout.js in the componentWillReceiveProps, the nextProps.children is equal to this:

For some reason the first child is "false" which is the one i just tried to resize. And that childEquals call blows up because it's expecting an object.
I did this to myself. I was returning a blank child. I'm an idiot. Closing.
PS. Thanks for posting this, it was helpful for me. I'm also an idiot lol.
Most helpful comment
I did this to myself. I was returning a blank child. I'm an idiot. Closing.