DEV Community

Discussion on: Why does React not delete the required component but deletes the last sibling?

View post
Collapse
 
ahmedgmurtaza profile image
Ahmed Murtaza • • Edited

You should share the codesandbox link, that would be more easy to understand.

By the way, going through your code you can replace splice with filter, as follows:
OLD

 const updatedChildren = [...state.children];
 /* Removes this sub-node's info from
* parent's state.children
*/
 const removedChild = updatedChildren.splice(childIndex, 1);
 updateChildren(updatedChildren);
Enter fullscreen mode Exit fullscreen mode

NEW

const updatedChildren = [...state.children].filter((item,index)=>index !== childIndex);
updateChildren(updatedChildren);
Enter fullscreen mode Exit fullscreen mode
Collapse
 
swagwik profile image
Sattwik Sahu •

Thanks, I put i the codesandbox link too. I have already tried both approaches (splice and filter). The problem is that the component's state updates perfectly well in both cases, but the DOM does not.

Example

If I delete element #3 in a list named 1, 2, 3, 4, 5, then the element #3 GETS DELETED on the component STATE when I press delete but on the DOM, element #5 gets deleted instead of #3