Nice quick article. We also use the same rules and methods to prevent the issues you mentioned. The only critique I have is that your example is not particularly extensible, because you are using the onClick prop for the delete functionality. We usually request that the developer provide specificity for the exact handler they are requesting access to, so that we can add handlers for editing records, routing and other actions to the list item in the future.
This is an inroad to a broader digression about HTML5-compatible props and custom props that is probably outside the scope of this conversation, but we usually reserve the onClick prop key for the actual place where that HTML5 attribute will be applied to the final element (i.e. — the actual <button/>). If we have a list item that will eventually render a delete button, it gets a prop called “handleDeleteClick” which will then be passed into the onClick prop/attribute of the respective HTML5 button.
By doing this, we don’t have to do any refactoring or renaming to add edit, lock, etc… actions to the item in the future.