Edit and set state without re-rendering in an infinite loop

Question

I couldn't edit the value in a component and save the value using useState as it is throwing the below error:

Too many re-renders. React limits the number of renders to prevent an infinite loop.

My objective is to,

• Display the component with values that are received from the rowData.
• Edit the value that are received from the rowData and save it back to rowData.

The rendering starts from the function editPropertyValue(settings, index) where it evaluates data type to render the value in respective component such as input or checkbox. If datatype is text then component is <input; if datatype is boolean or 'true' or 'false' string then component is checkbox.

Finally, it calls the getSuitableEditField(settings, fieldType, id); where I am trying to display the value that is received from the rowData. Assume that rowData is from API using axios GET call.

Try: I tried to implement useEffect() for unmounting and mounting the component with new data but still got odd errors.

The below code in stackblitz, getSuitableEditField has the implementation with issue.

If you double click on the middle column value, you can see the issue. Click on any value under Property Value. Please help or hint a clue,

https://stackblitz.com/edit/react-rzeclq?file=src%2FApp.js,src%2Fstyle.css