I'm using multiple select component of MUI, when select option I want display the label of select tag instead of value. I try research on google but not solve my problem. I hope someone can help me.

I want to display to the user side a label, but I want setState to be the id to insert into the database

This is codesandbox link

https://codesandbox.io/embed/elated-bose-phh8xx?fontsize=14&hidenavigation=1&theme=dark

CodePudding user response：

A trick I have found is that you can called find method in Chip Lable and get that object by id then use its label

Example Code:

 <Chip key={value} label={DUMMY_DATA.find(item => item.id === value).label} variant="light" color="primary" size="small" />

Read more about find Method

Complete code:

<FormControl fullWidth>
  <InputLabel id="demo-multiple-chip-label">Chuyên mục</InputLabel>
  <Select
    labelId="demo-multiple-chip-label"
    id="demo-multiple-chip"
    multiple
    value={personName}
    onChange={handleChange}
    input={<OutlinedInput id="select-multiple-chip" label="Chuyên mục" />}
    renderValue={(selected) => (
      <Box sx={{ display: "flex", flexWrap: "wrap", gap: 0.5 }}>
        {selected.map((value) => (
          <Chip
            key={value}
            label={DUMMY_DATA.find((item) => item.id === value).label}
            variant="light"
            color="primary"
            size="small"
          />
        ))}
      </Box>
    )}
    MenuProps={MenuProps}
  >
    {DUMMY_DATA.map((o) => (
      <MenuItem key={o.id} value={o.id}>
        {o.label}
      </MenuItem>
    ))}
  </Select>
</FormControl>;

CodePudding user response：

Write value={o.label} instead of value={o.id}

<MenuItem key={o.id} value={o.label}>
     {o.label}
 </MenuItem>

Hope it works fine.