React-State/Removing Components

I was wondering if anyone might be able to shed a light on an issue I am having. I’m fairly certain it is a issue with my algorithm rather than my code.

Parent Component maintains a list of type React Component and maps through the list to display the child components in render.

Parent Component also maintains a list of object data that is obtained through a callback from the child component.

Child component maintains its own state of data that can be edited or deleted. Only upon completion does the data get sent back to the parent.

In order to delete itself the Child calls a delete callback function and sends ID of the component to the parent. The parent component then removes the correct data object from the data list as well as the correct react component from the component list.

The parents state is then updated by utilizing the new updated lists.

However when ever the parent component Re-Renders it removes the last child component that was displayed even though a component prior in the list was removed and that one still exists in the list.

Display Component List
Remove A
Display updated component List
However Component List contains B and C

Hi @Xevoxe, it sounds like the issue is likely occurring when you set the new state. Can you share your code where you set the state in Parent? I’d be happy to take a look!