如何在 React JS 中为特定 ID 动态插入表中的输入数据？

Question

[In this I want to store the value of marks,id,name of each cell in objects of an array.. I try it but not get correct answer please help me how to store marks and id of each cells in objects of an array

const [values, setValues] = useState(new Array(tableData.length).fill(''));

return (
  <TableContainer>
    <Table style={{ height: 'max-content' }} stickyHeader>
      <TableHead>
        <TableRow>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Roll Number
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Name
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Email
          </TableCell>
          <TableCell
            style={{
              border: '0px solid transparent',
              fontFamily: "'Inter', sans-serif",
            }}
            align='center'
          >
            Marks
          </TableCell>
        </TableRow>
      </TableHead>
      <TableBody>
        {tableData.map((data, index) => (
          <>
            <TableRow>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.roll}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.name}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.email}
              </TableCell>
              <TableCell
                key={index}
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                <input
                  key={index}
                  type={'text'}
                  style={{
                    border: '1px solid black',
                    width: '66px',
                    height: '32px',
                    background: '#F2F2F2',
                    paddingLeft: '5px',
                  }}
                  required
                  value={values[index]}
                  onChange={(e) => {
                    setValues(e.target.value);
                  }}
                />
              </TableCell>
            </TableRow>
          </>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);

[1]: https://i.stack.imgur.com/oGvYW.png

Answer 1

1. You should set the key attribute only for the parent TableRow element
2. You could initialize the values state as an object of the form { id, value } and update the value corresponding to the id changed. This configuration should prevent potential errors due to table filtering and index mismatches:

const [values, setValues] = useState(tableData.map(data => { id: data.id, value: ''}));

const handleValueChange = (e, id) => {
    const otherValues = values.filter(v => v.id !== id);
    const updatedValue = { id, value: e.target.value };
    setValues({ ...otherValues, updatedValue })
}

return (
  <TableContainer>
    <Table style={{ height: 'max-content' }} stickyHeader>
        ...
      <TableBody>
        {tableData.map((data, index) => (
            <TableRow key={data.id}>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.roll}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.name}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                {data.email}
              </TableCell>
              <TableCell
                style={{
                  border: '0px solid transparent',
                  fontFamily: "'Inter', sans-serif",
                }}
                align='center'
              >
                <input
                  type='text'
                  style={{
                    border: '1px solid black',
                    width: '66px',
                    height: '32px',
                    background: '#F2F2F2',
                    paddingLeft: '5px',
                  }}
                  required
                  value={values.find(v => v.id === data.id)?.value || ''}
                  onChange={(e) => { handleValueChange(e, data.id); }}
                />
              </TableCell>
            </TableRow>
        ))}
      </TableBody>
    </Table>
  </TableContainer>
);