I think that one thing that could be problematic here (although I’m not sure if it’ll fix the problem) is having the key
be the index. As React (to my understanding) checks whether the DOM has to get updated based on the question if the element has changed (i.e., here, if the key has changed), having the key stay the same (the fourth element will still have 3
as its key) could lead to React determining that it doesn’t have to update this aspect of the DOM, leaving it in the state as shown by your screenshot. In general, though, having the index as a key isn’t necessarily a good idea when you can manipulate items (as it basically defeats the purpose of it).
Could you try to change the key
to something different, e.g., a JSON.stringify
version of role
and item
(or, for testing, leave it out), and report what happens?