How to change dropdown in each row of mui table cell in a loop?

Question

import * as React from "react";
import {
  Select,
  MenuItem,
  Table,
  TableBody,
  TableCell,
  TableContainer,
  TableHead,
  TableRow,
  Paper
} from "@mui/material";
import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
function createData(name, mobile, access) {
  return { name, mobile, access };
}

const rows = [
  createData("Sam", 9865745159),
  createData("Amily", 8723879237),
  createData("Eva", 9432671262),
  createData("Jack", 7898083305),
  createData("Diana", 8973667356)
];

export default function DenseTable() {
  const [access, setAccess] = React.useState(1);
  const handleChange = (event, index, data) => {
    setAccess(event.target.value);
  };
  return (
    <TableContainer component={Paper}>
      <Table sx={{ minWidth: 650 }} size="small" aria-label="a dense table">
        <TableHead>
          <TableRow>
            <TableCell align="center">Name</TableCell>

            <TableCell align="center">Mobile</TableCell>
            <TableCell align="center">Access</TableCell>
          </TableRow>
        </TableHead>
        <TableBody>
          {rows.map((row) => (
            <TableRow
              key={row.name}
              sx={{ "&:last-child td, &:last-child th": { border: 0 } }}
            >
              <TableCell component="th" scope="row" align="center">
                {row.name}
              </TableCell>
              <TableCell align="center">{row.mobile}</TableCell>

              <TableCell align="center">
                <Select
                  value={access}
                  onChange={handleChange}
                  MenuProps={{
                    MenuListProps: { disablePadding: true }
                  }}
                  fullWidth
                  size="small"
                  IconComponent={() => (
                    <KeyboardArrowDownIcon
                      sx={{
                        position: "absolute",
                        right: 10,
                        width: "20px",
                        pointerEvents: "none"
                      }}
                    />
                  )}
                  sx={{
                    fontSize: "14px",
                    width: "100px",

                    height: "28px"
                  }}
                >
                  <MenuItem
                    value={1}
                    sx={{
                      fontSize: "14px",
                      height: "25px",
                      width: "100%"
                    }}
                  >
                    Allow
                  </MenuItem>
                  <MenuItem
                    value={2}
                    sx={{
                      fontSize: "14px",
                      height: "30px",
                      width: "100%"
                    }}
                  >
                    Decline
                  </MenuItem>
                </Select>
              </TableCell>
            </TableRow>
          ))}
        </TableBody>
      </Table>
    </TableContainer>
  );
}

I am using ReactJs with Material UI table with dropdown in each row of the table cell. Whenever I am changing the dropdown option of one row then automatically changes to same option in dropdown of all rows.I have to handle each row separately. How to change dropdown in each row of mui table cell in a loop? file.

Answer 1

Move the dropdown to a new jsx component and manage the state there

function dropdownComponent (){

      const [access, setAccess] = React.useState(1);
      const handleChange = (event, index, data) => {
        setAccess(event.target.value);
      };
      

      return  
            (<Select
                  value={access}
                  onChange={handleChange}
                  MenuProps={{
                    MenuListProps: { disablePadding: true }
                  }}
                  fullWidth
                  size="small"
                  IconComponent={() => (
                    <KeyboardArrowDownIcon
                      sx={{
                        position: "absolute",
                        right: 10,
                        width: "20px",
                        pointerEvents: "none"
                      }}
                    />
                  )}
                  sx={{
                    fontSize: "14px",
                    width: "100px",

                    height: "28px"
                  }}
                >
                  <MenuItem
                    value={1}
                    sx={{
                      fontSize: "14px",
                      height: "25px",
                      width: "100%"
                    }}
                  >
                    Allow
                  </MenuItem>
                  <MenuItem
                    value={2}
                    sx={{
                      fontSize: "14px",
                      height: "30px",
                      width: "100%"
                    }}
                  >
                    Decline
                  </MenuItem>
                </Select>
    )
}

Call it like this

  <TableCell align="center">
      <dropdownComponent />