Removing items from a grid

WARNING

If you want to remove a Gridstack item from a Gridstack container, don't remove the item from the state variable.

const [container, setContainer] = useState([
  {
    id: "1",
    x: 0,
    y: 0,
    w: 12,
    h: 2,
    data: {
      type: "calendar",
      title: "A calendar widget",
      data: "10/10/1990",
    },
  },
]);

const remove = (id) => {
  setLayout((prevLayout) => prevLayout.filter((item) => item.id !== id));
}; // Don't remove the item from the json directly.

TIP

Use this instead.

const gridRef = useRef();
const remove = (id) => {
  gridRef.current.remove(id); // Let the lib know that you want to remove an item from the layout.
};
return <GridstackContainer ref={gridRef}></GridstackContainer>;