Hot to show IconButton inside MenuItem but not if it selected

user_17188689 0
Viewed 26

I wanted to show icon button inside option (<MenuItem/>) like this

enter image description here

and make it invisible if it selected

enter image description here

this is my script

<TextField
  label="Payment Method History"
  select
  fullWidth
  variant="outlined"
  name="paymentMethod"
  onChange={(e) => handlePaymentMethodHistoryChange(e.target.value)}
>
  {
    paymentMethodHistory?.map((paymentMethod) => (
      <MenuItem key={paymentMethod._id} value={paymentMethod} style={{ width: '100%' }}>
        <Box width="100%" display="flex" justifyContent="space-between">
          {`${paymentMethod.accountHolderName} - ${paymentMethod.bank.name}`}
          <IconButton onClick={() => deletedPayMethod(paymentMethod._id)} size="small">
            <Delete color="error" fontSize="inherit" />
          </IconButton>
        </Box>
      </MenuItem>
    ))
  }
</TextField>
web-frontend material-ui next.js reactjs
1 Answers

Assuming that you are storing the selected payment method value into a state variable you can use conditional rendering:

{paymentMethod !== selectedPaymentMethod && 
  <IconButton
    onClick={() => deletedPayMethod(paymentMethod._id)}
    size='small'
  >
    <Delete color='error' fontSize='inherit' />
  </IconButton>}
user_132112630
Related