Requirement is to edit only the Property value column. This dynamic input has been built through .map function.Where only during the double click the value should become editable, onClick of elsewhere it should become read-only.
Problem statement:
While doubleClicked on value, all the Property Value becomes editable. Which should not happen. Only the doubleClicked cell should become editable rest should be read-only.
Under Actions column, there are 4 buttons, Save, Delete, Info & Cancel. These actions should be applicable only for the edited Property value cell and should not apply for other cells.
Try 1: I tried using the dynamic ID for the elements based on index value but still I am using the a common state it was getting applied for all rows.
Try 2: I tried using event.current and event.currentTarget but still it was applying for all rows.
I have deployed the code here in stackblitz please take a look at it and comment if you require any input to help me.
Coder view: https://stackblitz.com/edit/react-kzog2m
End-user view: https://react-kzog2m.stackblitz.io/
Double click to edit the middle column - Property Values
fixed it for you
The issue you did is that you are not checking any index when you edit basically you are just saying that they are all editable
but instead of making edit boolean true or false you assign in the index of the row you clicked you could know which row that is pressed and make it editable only while the rest are viewed