CODEWITHSUNDEEP
reactjsselectmaterial-uidropdown
bartugenccan
bartugenccan

Reputation: 71

Material UI MultiSelect Showing Selected Items Below Dropdown

As I wrote on the title, I want to display selected items below the dropdown. But it display them inside by default. It doesn't have to be multiple select but when I click on an item I want it to be pushed to an array and then I want to map through that array below dropdown.

<FormControl variant="outlined" sx={{ m: 1, minWidth: 120 }}>
              <InputLabel id="company">Şirket</InputLabel>
              <Select
                labelId="company"
                name="company"
                id="company"
                label="Company"
                value={formik.values.company}
                onChange={formik.handleChange}
                sx={{ width: 300 }}
              >
                <MenuItem value="">
                  <em>None</em>
                </MenuItem>
                <MenuItem value={10}>Ten</MenuItem>
                <MenuItem value={20}>Twenty</MenuItem>
                <MenuItem value={30}>Thirty</MenuItem>
              </Select>
        </FormControl>

Upvotes: 0

Views: 1526

Answers (1)

Akis
Akis

Reputation: 2282

The selected item should be stored in the state of your component. You can use this to map through the items and display them where you want. Have a look at this example code I created based in MUI sandbox example for the multiple select sandbox

Upvotes: 1

Related Questions