react: ReactGridLayout.children[0].x must be a number

The issue is not similar to the one with the same title.

I am using react hook to create my own dynamic add/remove using this example to create my dynamic add/remove.

As the title suggests, the error message happens when clicking the ‘create item’ button.

This is my codesandbox link that shows my code and the error. Any help is appreciated.

Answer

The issue you were having is that your widget state is set as an array of objects but when you were updating that state in the onAddItem function you were setting the it as an object.

Here’s the onAddItem function where the widget state is being updated with the previous state and the new state into a new array.

const onAddItem = () => {
    setCounter(counter + 1);
    setWidgetList([
      ...widget,
      {
        i: "chart" + counter,
        x: (widget.length * 2) % (cols || 12),
        y: Infinity, // puts it at the bottom
        w: 2,
        h: 2
      }
    ]);
  };