React-grid-layout: onLayoutChange is triggered with different layout information when a new item is added

[rajeshwarpatlolla]

I have a basic layout initially [{w: 4, h: 6, x: 0, y: 0, i: "0"}, {w: 4, h: 6, x: 4, y: 0, i: "1"}]

and then i added a new item which has a layout {i: "3", x: 8, y: 0, w: 4, h: 6}

After adding the new item to the layout it will be
[{w: 4, h: 6, x: 0, y: 0, i: "0"}, {w: 4, h: 6, x: 4, y: 0, i: "1"}, {i: "3", x: 8, y: 0, w: 4, h: 6}]

But the onLayoutChange call back function is triggered immediately after adding the new items and the result is a different object in the third place in our case.
[{w: 4, h: 6, x: 0, y: 0, i: "0"}, {w: 4, h: 6, x: 4, y: 0, i: "1"}, {w: 1, h: 1, x: 0, y: 6, i: "2"}]

Why is it inserting a new item {w: 1, h: 1, x: 0, y: 6, i: "2"} in layout instead of what i pass {i: "3", x: 8, y: 0, w: 4, h: 6}

I am using redux to store the widgets/items data. Even when i am passing the data to layouts it is fine. But the onLayoutChange is triggered automatically with a new data.

[rajeshwarpatlolla]

It is because of the i value. It should be in a sequential order. I added a new item with {i: "3"} instead of {i: "2"}. That was causing random reordering issue.