title: How to add drop-down in each row of Material UI Table?
body: <p>I am trying to Use <code>material-ui</code> Drop Down Menu in each row in <code>material-ui</code> Table but when I am trying to change the value of one one drop down, the value of every drop down is changing. Here is the code :</p>
  <pre><code>const useStyles = makeStyles((theme)=&gt;({
      root: {
          width: '100%',
      },
      container: {
          maxHeight: 440,
      },
      list: {
          backgroundColor: theme.palette.background.paper,
      },
  
  }));
  
  const OrdersTable = () =&gt; {
  
      const classes = useStyles();
      const [page, setPage] = useState(0);
      const [anchorEl, setAnchorEl] = useState(null);
      const [selectedIndex, setSelectedIndex] = useState(0);
      const [Data, setData] = useState([]);
      const [rowsPerPage, setRowsPerPage] = React.useState(5);
      const [Pages, setPages] = useState(null)
      const options = [
          'PLACED',
          'ACCEPTED',
          'PREPARING',
          'FOOD READY',
          'PICKED UP',
          'DELIVERED'
      ];
  
  
      const GetData = async () =&gt; {
          const token = token
          const api = api-url
          await axios.get(api, { headers: { &quot;Authorization&quot;: `Bearer ${token}` } })
              .then(res =&gt; {
                  const results = res.data.data.results;
                  const pages = res.data.data.totalPages;
                  // const statusOfOrder = res.data.data.results.orderStatus;
                  setData(results);
                  setPages(pages);
                  console.log(results);
              })
      }
      useEffect(() =&gt; {
          GetData();
          console.log(Data.id);
          // console.log(Data.totalPages)
      }, []);
  
      const handleChangePage = (event, newPage) =&gt; {
          event.preventDefault();
          setPage(newPage);
      };
      const handleChangeRowsPerPage = (event) =&gt; {
          event.preventDefault();
          setRowsPerPage(+event.target.value);
          setPage(0);
      };
      const handleClickListItem = (event) =&gt; {
          setAnchorEl(event.currentTarget);
      };
      const handleMenuItemClick = (event, index) =&gt; {
          setSelectedIndex(index);
          setAnchorEl(null);
      };
      const handleClose = () =&gt; {
          setAnchorEl(null);
        };
      return (
          &lt;Paper className={classes.root}&gt;
              &lt;TableContainer className={classes.container}&gt;
                  &lt;Table stickyHeader aria-label=&quot;sticky table&quot;&gt;
                      &lt;TableHead&gt;
                          &lt;TableRow&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Name&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;City&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Address&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Phone Number&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;State&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Pin Code&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Items&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Items Count&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Total Amount&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Current Status&lt;/TableCell&gt;
                              &lt;TableCell align=&quot;center&quot;&gt;Update Status&lt;/TableCell&gt;
                          &lt;/TableRow&gt;
                      &lt;/TableHead&gt;
                      &lt;TableBody&gt;
                          {
                              Data.slice(page * rowsPerPage, page * rowsPerPage + rowsPerPage).map((row, index) =&gt; {
                                  return (&lt;TableRow key={index}&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.address.name}&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.address.city}&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.address.full_address}&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.address.phone}&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.address.state}&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.address.pin_code}&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{
                                          row.items.map((itemsName) =&gt; {
                                              return itemsName.name + &quot;,&quot;
                                          })
                                      }
                                      &lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.totalItems}&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.grandTotal}&lt;/TableCell&gt;
                                      &lt;TableCell align=&quot;center&quot;&gt;{row.orderStatus}&lt;/TableCell&gt;
                                      {/* &lt;TableCell align=&quot;center&quot;&gt;{row.id}&lt;/TableCell&gt; */}
                                      &lt;TableCell&gt;
                                          &lt;div className={classes.list}&gt;
                                              &lt;List component=&quot;nav&quot; aria-label=&quot;Device settings&quot;&gt;
                                                  &lt;ListItem
                                                      button
                                                      aria-haspopup=&quot;true&quot;
                                                      aria-controls=&quot;lock-menu&quot;
                                                      aria-label=&quot;when device is locked&quot;
                                                      onClick={handleClickListItem}
                                                  &gt;
                                                      &lt;ListItemText primary={options[selectedIndex]} /&gt;
                                                  &lt;/ListItem&gt;
                                              &lt;/List&gt;
                                              &lt;Menu
                                                  id=&quot;lock-menu&quot;
                                                  anchorEl={anchorEl}
                                                  keepMounted
                                                  open={Boolean(anchorEl)}
                                                  onClose={handleClose}
                                              &gt;
                                                  {options.map((option, index) =&gt; (
                                                      &lt;MenuItem
                                                          key={option}
                                                          // disabled={index === 0}
                                                          selected={index === selectedIndex}
                                                          onClick={(event) =&gt; handleMenuItemClick(event, index)}
                                                      &gt;
                                                          {option}
                                                      &lt;/MenuItem&gt;
                                                  ))}
                                              &lt;/Menu&gt;
                                          &lt;/div&gt;
                                      &lt;/TableCell&gt;
                                  &lt;/TableRow&gt;)
                              })
                          }
                      &lt;/TableBody&gt;
                  &lt;/Table&gt;
              &lt;/TableContainer&gt;
              &lt;TablePagination
                  rowsPerPageOptions={[5, 10, 15]}
                  component=&quot;div&quot;
                  count={Data.length}
                  rowsPerPage={rowsPerPage}
                  page={Data.totalPages}
                  onChangePage={handleChangePage}
                  onChangeRowsPerPage={handleChangeRowsPerPage}
              /&gt;
          &lt;/Paper&gt;
      );
  }
  
  export default OrdersTable
  
  
  </code></pre>
  <p>I am new to <code>material-ui</code> and react please help me or suggest me if there is some other way of doing it in efficient manner.</p>