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

[cguedes]

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

[stevehu]

@cguedes Thanks a lot. This is the best issue I have seen on github.

[nicklasb]

@cguedes I just saw this, and agree with @stevehu, if all were like this.
@cguedes, what did you use to make the gif?

[cguedes]

@stevehu @nicklasb Tanks for your kind words.

@nicklasb I've used Recordit. Is an awesome tool to take "video screenshots".

[nicklasb]

I just tried it, yeah that is really a killer app. Thanks for the tip!

[stevehu]

@cguedes I have tried to use UUID but the updated field keeps refreshing. It is not easy to fix it and I need more time to figure it out.

[devel-pa]

I don't know if is already solved as it's here for quite some time, I have an idea, not tested.

How about transforming arrays into objects when setting the scope and invers transformation (how to detect it has been an array?) when exporting the scope.

lodash:
_.invert(_.invert(['a', 'b', 'c']))

PS: not necesarely needed to use invert for making the IDs, but a special ID that can be detected when exporting

[kevadkins]

I ran into this issue and the key to fixing it (pun intended) is to have a unique key on the list item in the Array component.

I used lodash _.uniqueId()

<li key={_.uniqueId(i)} className="list-group-item">

I'd already defined my own Array component (basically just a copy of it), so was able to do this without changing the original component in the src.

Thanks @cguedes for pointing me in the right direction!

[stevehu]

@devel-pa @kevadkins I have tried with unique keys and it doesn't work for me. React refreshes and creates brand new object and my browser dead eventually. My implementation was not the same as yours though. Could you please test your solution to verify if it works?

[maplechori]

I resolved this by embedding SchemaForm inside another component, once that component has been created we don't touch that model.

[stevehu]

That is very interesting. If you don't touch the model. you don't have the issue. what if you remove one of the items in the array? Are you updating the model in schema form or updating the model in your wrapper component?

[maplechori]

I have a component that maps over a group of types, each type holds a form/schema/model. I render the one that is selected.

[stevehu]

@maplechori Is your component open sourced? Or could you please share your component so that someone can be inspired to find a generic solution to resolve the problem?

[cguedes]

@stevehu you can check this in the live demo you provide (sample: simple array)

print screen

animated gif

[maplechori]

@stevehu I'll try to implement a similar component this week.

[stevehu]

Excellent. Thanks.

[maplechori]

Seems the bug that I saw is not the one mentioned here. No luck with this one yet.

[MrSaints]

I encountered this problem last week. I tried to resolve it, but I wasn't able to isolate the problem. The models are definitely correct, but the UI itself is not.