react-grid-layout - Failed prop type: Layout property must be an object. Received: [object Array]

Question

I have followed the guide at react-grid-layout and I am still getting this error message.

Here is my layout object:

import React from "react";
import { Responsive, WidthProvider } from "react-grid-layout";
import NewvsReturnVisitors from "./newvsreturnvisitors";
import ReactDOM from "react-dom";
import "./styles/styles.css";

const e = React.createElement;
const ResponsiveGridLayout = WidthProvider(Responsive);

function App() {

  const layout = [
    { i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 },
    { i: "2", x: 10, y: 0, w: 2, h: 1, minW: 2, minH: 1 }
  ];

  return (
    <ResponsiveGridLayout
      layouts={layout}
    >
      <div key="1">
        <NewvsReturnVisitors />
      </div>
    </ResponsiveGridLayout>
  );
}

ReactDOM.render(e(App), document.getElementById("root"));

My Codesanbox is here:

Just open the console and the error message is there. Will appreciate any help!

Answer 1

You are using react-grid-layout version 1.2.0 which has a few changes in type structure

Here is the new update type:

interface Layouts {
  [P: string]: Layout[];
}

To satisfy this, you will need to change your layout object from:

const layout = [
  { i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 },
  { i: "2", x: 10, y: 0, w: 2, h: 1, minW: 2, minH: 1 }
];

TO:

const layout = {
  xs: [{ i: "1", x: 0, y: 0, w: 2, h: 1, minW: 2, minH: 1 }],
  md: [{ i: "2", x: 10, y: 0, w: 2, h: 1, minW: 2, minH: 1 }]
};

With xs, md are breaking points.