How to update a specific column inside a table onclick of a button using reactjs & material ui

Question

Code Link https://codesandbox.io/s/distracted-lake-ih0c8?file=/src/App.js

I want to update values of 4th and 5th columns on a specific row inside a table whenever the specific row update button is clicked, currently I am able to map values inside the table. I have a update button on the last column, So whenever the update button is clicked I want to edit only the 4th and 5th column of that specific row inside the table and render a textfield for the same so the user can edit those values inside the table of that specific row. Image of what I have achieved so far .Please someone help me out here.

Working codesandbox link https://codesandbox.io/s/distracted-lake-ih0c8?file=/src/App.js

Update : Inserting Code

class ViewConsumption extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: [
        {
          BomComponentCode: "345543",
          BomComponentName: "COMP1",
          BomComponentRefUOM: "gm",
          consumptionBatchNumbers: [
            {
              componentBatchNumber: "20",
              componentQuantity: 2
            },
            {
              componentBatchNumber: "21",
              componentQuantity: 3
            }
          ]
        },
        //2nd cloumn
        {
          BomComponentCode: "5543",
          BomComponentName: "COMP2",
          BomComponentRefUOM: "KG",
          consumptionBatchNumbers: [
            {
              componentBatchNumber: "22",
              componentQuantity: 4
            },
            {
              componentBatchNumber: "23",
              componentQuantity: 5
            }
          ]
        }
      ]
    };
  }

  render() {
    const { classes } = this.props;
    const { data } = this.state;
    return (
      <div className={classes.list}>
        <React.Fragment>
          <Grid
            item
            xs={12}
            sm={12}
            md={12}
            className={classes.grid}
            style={{ paddingLeft: "0" }}
          >
            <p variant="h6" className={classes.font}>
              Table Details
            </p>
            <span className={classes.borders}></span>
          </Grid>

          <div>
            <TableContainer component={Paper} className={classes.paper}>
              <Table className={classes.table} aria-label="collapsible table">
                <TableHead>
                  <TableRow>
                    <TableCell> Number</TableCell>
                    <TableCell> Text</TableCell>
                    <TableCell>UOM</TableCell>
                    <TableCell> Batch </TableCell>
                    <TableCell> Quantity</TableCell>
                    <TableCell>Actions</TableCell>
                  </TableRow>
                </TableHead>

                <TableBody>
                  <React.Fragment>
                    {data.map((item, i) => (
                      <React.Fragment>
                        <TableRow key={i}>
                          <TableCell scope="row" align="left">
                            {item.BomComponentCode}
                          </TableCell>
                          <TableCell align="left">
                            {item.BomComponentName}
                          </TableCell>
                          <TableCell align="left">
                            {item.BomComponentRefUOM}
                          </TableCell>
                          <TableCell>
                            {item.consumptionBatchNumbers.map((row, i) => (
                              <div key={i}>
                                <TableCell align="left">
                                  {row.componentBatchNumber}
                                </TableCell>
                              </div>
                            ))}
                          </TableCell>

                          <TableCell align="left">
                            {item.consumptionBatchNumbers.map((row, i) => (
                              <div key={i}>
                                <TableCell align="left">
                                  {row.componentQuantity}
                                </TableCell>
                              </div>
                            ))}
                          </TableCell>
                          <TableCell>
                            <button onClick={() => alert(i)}>Update</button>
                          </TableCell>
                        </TableRow>
                      </React.Fragment>
                    ))}
                  </React.Fragment>
                </TableBody>
              </Table>
            </TableContainer>
          </div>

          <Grid container justify="center">
            <Grid
              item
              xs={4}
              sm={4}
              md={2}
              style={{
                textAlign: "center",
                padding: "1rem"
              }}
            >
              <button fullWidth>Close</button>
            </Grid>
          </Grid>
        </React.Fragment>
      </div>
    );
  }
}

export default ViewConsumption;

Answer 1

As Drew Reese suggested ,it's pretty simple, You have to use a unique identifier to achieve that, so that only that specific clicked table renders textfields , in your case you are trying to filter based on specific index, which is not necessary in your table, you can use number column as an unique identifier and render the table based on the same.

DEMO :

CodeSandBox