React send new props and then clear state

I have the following situation:

• I have a parent React component and a child.
• The parent has a table and the child has some controls of its own.
• What I want to accomplish is being able to click on a cell in the parent table and have the cell value get transferred over to the child so that the user can edit it there.

This is what I implemented:

• I record the cell value in state in the parent on click.
• When this I record this value, a re-render happens and the string gets sent to the child via props.
• The issue I'm running into is that if something forces a re-render on the parent, that value will get sent to the child again, even though the child may have changed it.

To solve this, what I thought of originally was to send the prop down to the child and then have the child reach back up via a callback to the parent to clear the value in the parent's state. I fall into a loop doing this so naturally it doesn't work.

What is the correct way to send data down into a child component and then have it get cleared post-render?

https://stackoverflow.com/questions/67040582/react-send-new-props-and-then-clear-state April 11, 2021 at 09:03AM