how can i display these Edit and delete buttons next to the each grid item

Question

so i am working on a material Ui for the first time, i have to make the edit and delete button next to each grid item, one approach is used is to map over the icons separately and renders it in the grid, but to get's inside the grid. other thing is i moved it outside the grid item and and in the parent element i give it an display flex and flex direction row , but screwed up the layout of the page. please guide me what to do, i am sharing only the lines of code which is rendering it

`

       
        <Grid container width="100%" maxWidth="auto">
          {ingredientsList.map((item) => (
            <Grid item xs={12} md={5} key={item.id} sx={{ width: "700px" }}>
              <IngredientItem>
                <IngredientName>{item.name}</IngredientName>
                <Box display="flex" flexDirection="row" alignItems="end">
                  <Quantity>1</Quantity>
                  <Unit>{item.unit}</Unit>
                </Box>
                <EditAndDeleteIcons sx={{border:"none"}}>
                    <EditButton onClick={() => console.log("Edit clicked", item.id)}>
                      <Edit />
                    </EditButton>
                    <DeleteButton onClick={() => handleRemoveIngredient(item.id)}>
                      <Delete />
                    </DeleteButton>
                  </EditAndDeleteIcons>
              </IngredientItem>
             
            </Grid>
          ))}
        </Grid>
      </Box>

Desired output is in the image attached

Answer 1

You don't need two use flex outside your <Grid/> to achieve this kind of UI. All you need to do is adjust Grid item breakpoints. Check the code below and replace it with your components and adjust spacing and gap as per your need.

import InputAdornment from '@mui/material/InputAdornment'
import Grid from '@mui/material/Grid'
import TextField from '@mui/material/TextField'
import DeleteIcon from '@mui/icons-material/Delete'
import EditIcon from '@mui/icons-material/Edit'
import { Fragment } from 'react'


const ingredientsList = [
  { id: 1, name: 'Ingredient 1', unit: 10 },
  { id: 2, name: 'Ingredient 2', unit: 20 },
  { id: 3, name: 'Ingredient 3', unit: 30 },
]

<Grid container spacing={1} alignItems="center">
    {ingredientsList.map((item) => (
      <Fragment key={item.id}>
        <Grid item xs={10} md={5}>
          <TextField
            fullWidth
            value={item.name}
            onChange={(e) => console.log(e.target.value)}
            InputProps={{
              endAdornment: <InputAdornment position="end">{item.unit}Kg</InputAdornment>,
            }}
          />
        </Grid>
        <Grid item xs={1} md={0.5}>
          <EditIcon />
        </Grid>
        <Grid item xs={1} md={0.5}>
          <DeleteIcon />
        </Grid>
      </Fragment>
    ))}
 </Grid>

👉 The code above with look something like this: