Changing Row Component when Button is clicked - React-Native

Question

In my React-Native app, I have a ListView with each row being rendered by following "Solution 2". Inside my row, I have a couple of custom TouchableHighlight components. When I press the "Delete" button in my row, I'd like it to replace the entire row or all the button components in the row, with a Text component saying, "This item has been deleted".

Does anyone have any idea of how to accomplish this? I'm not sure how to link my child component's onPress method (Delete button) to the parent component (Row) and have the Row replace its content with a Text component.

Answer 1

I created this code snippet to reproduce what you have described: https://snack.expo.io/Bk9-6VNLW.

You can accomplish the UI change by mutating the state of your row component which will trigger the update of your component. And by reading the deleted state, you can decide what components to render whether is a set of <TouchableHighlight>' buttons or just a` component.