Skip to content

Adding an item to a container after it has been initialized

To add an item to a container after it has been initialized, push the item direcly to the layout json.

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

const addItem = () => {
  setLayout((prevLayout) => [
    ...prevLayout,
    {
      id: "1",
      x: 0,
      y: 0,
      w: 12,
      h: 2,
      data: {
        type: "calendar",
        title: "A calendar widget",
        data: "10/10/1990",
      },
    },
  ]);
};

Click the Add item button to add a new item to the layout.