I need some guidance on this issue:
- My scenario involves a parent React component and its child.
- The parent component contains a table, while the child has its own controls.
- What I am trying to achieve is the ability to click on a cell within the parent's table and have that cell's value transferred to the child for editing by the user.
This is the approach I took:
- I store the cell value in the parent's state when it is clicked.
- Upon storing the value, a re-render occurs which sends the string to the child component through props.
- The problem I am facing is that if there is any trigger causing a re-render in the parent, the current value will be sent to the child again, even if the child has already made changes to it.
To address this issue, my initial thought was to pass the prop down to the child and then have the child communicate back to the parent via a callback to clear the value from the parent's state. However, this resulted in a loop and did not work as intended.
What is the correct method of passing data down to a child component and ensuring it gets cleared after rendering?