Array delete is not working (UI became out-of-sync of model)

In the following GIF image you can see that:

1. I'm adding three elements to the array (A, B and C)
2. I'm removing the second element (B)
3. The model is fine (with values A and C)
4. But in the UI we see that B remains visible (the last element is the one being removed - not rendered)

This happens because you are using array's index as the key for each li component rendered in the Array react component.

React uses key prop to improve performance. From the documentation you can read the following:

Keys should be stable, predictable, and unique. Unstable keys (like those produced by Math.random()) will cause many nodes to be unnecessarily re-created, which can cause performance degradation and lost state in child components.

I don't know a solution for this. But the solution should be around defining a stable KEY for the array elements internally tracked by react-schema-form.

• You can try this yourself in the online playground
• react-schema-form version used: 0.2.8

Start with src/Array.js around line 129 and reproduce the deletion sequence in the linked online playground using react-schema-form 0.2.8. Investigate the array element keys and verify that deleting the middle element removes the corresponding UI item while preserving the model values A and C.