React Edit Table

Question

I am trying to edit a single row but edit all rows, also still trying to add a drop down that will populate some rows, any advice or info will be appreciated.

Here is the code I am using,

<TableBody>
    {item.userBankAccount.map((item, index) => {
        return (
            <TableRow hover key={index}>
                {!currentlyEditing ? (
                    <TextField
                        label="bankName"
                        name="bankName"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankName || ''}
                    />
                ) : (
                    <TableCell>{item.bankName}</TableCell>
                )}

                {!currentlyEditing ? (
                    <TextField
                        label="BankAddress"
                        name="bankAddress"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankAddress || ''}
                    />
                ) : (
                    <TableCell>{item.bankAddress}</TableCell>
                )}

                {!currentlyEditing ? (
                    <TextField
                        label="bankSwift"
                        name="bankSwift"
                        onChange={(e) => this.onChangeUserBankAccount(e, index)}
                        type="text"
                        value={item.bankSwift || ''}
                    />
                ) : (
                    <TableCell>{item.bankSwift}</TableCell>
                )}
            </TableRow>
        );
    })}
</TableBody>

Answer 1

the problem is here,

In each line of TableRow you have

{!currentlyEditing ? (

this is same for all TableRow. so, if one gets currentlyEditing = true then all of them becomes editable.

Solution:

Just take the state of currentlyEditing in the TableRow
So, Each an every of TableRow gets their own currentlyEditing state,
AND, thus others in the mean time will not be editable