React-grid-layout: Cannot read property 'key' of null in react-grid-layout utils when resizing card.

Created on 26 May 2020  路  3Comments  路  Source: STRML/react-grid-layout

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.

Most helpful comment

I did this to myself. I was returning a blank child. I'm an idiot. Closing.

All 3 comments

I found out a little more info. In ReactGridLayout.js in the componentWillReceiveProps, the nextProps.children is equal to this:
Screen Shot 2020-05-27 at 9 25 38 AM

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.

Was this page helpful?
0 / 5 - 0 ratings