How Do I Delete Specific Child React Components?

JSFiddle: https://jsfiddle.net/morahood/cp569zg6/38/ When I delete a child ServiceItem component from the ServiceList component, I am running into an issue where the last ServiceIt

Solution 1:

Your issue is with your key={i}.

React lists requires the key of an item to be unique to the item, regardless of the position of the item in the list. This allows react to do smart management of the list in case of updates.

React will NOT render the following update correctly:

From:To:
name:key:                name:          key:
Bill      0                   Bill           0
Charlie   1                   Dave           1
Dave      2

Because react thinks that the Charlie record is unchanged (because the key is unchanged).

I would advise you to put some sort of ID from the service-item retrieved as key.

On name, e.g.

From:To:
name:key:                name:          key:
Bill      Bill                Bill           Bill
Charlie   Charlie             Dave           Dave
Dave      Dave

React will render the update correctly in this case (because key is unique to the item).