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.
Example: Display Component List A B C Remove A Display updated component List A B However Component List contains B and C