Binding initial value to material ui select

Question

I am using material ui in my react application. And I am using select component. I want to bind some initial values to the select control. I had tried with the useState hook. It's not working. Below is the code i am using.

const userContributors=[{
  firstName: "user101",
  id: "1",
  role: "Users"
},{
  firstName: "user102",
  id: "2",
  role: "Users"
},{
  firstName: "user103",
  id: "3",
  role: "Users"
}]

const [ApplicationAdminUsers, SetApplicationAdminUsers] = useState([
{
  firstName: "user101",
  id: "1",
  role: "Users"
}
]);

<FormControl
                variant="outlined"
                margin="normal"
                InputLabelProps={{
                  shrink: true
                }}
                validators={["required"]}
                errorMessages={["Select Application Admin"]}
                className={[
                  classes.formControl,
                  "fullWidthControl",
                  "multiselect-checkbox"
                ].join(" ")}
              >
                <InputLabel
                  ref={inputLabel}
                  htmlFor="select-multiple-checkbox"
                  className="multi-label-top"
                >
                  Select Users...
                </InputLabel>
                <Select
                  multiple
                  value={ApplicationAdminUsers}
                  onChange={handleChangeUserContributores}
                  className="multi-input-padding"
                  validators={["required"]}
                  errorMessages={["Select Application Admin"]}
                  input={
                    <OutlinedInput
                      labelWidth={labelWidth}
                      id="select-multiple-checkbox"
                    />
                  }
                  MenuProps={MenuProps}
                >
                  {userContributors.map((item, index) => (
                    <MenuItem key={"aa" + item.id} value={item}>
                      {item.firstName}
                    </MenuItem>
                  ))}
                </Select>
              </FormControl>

And here I'm using this as multi select control. Any solutions to solve this. Thanks

Answer 1

When you're using object as material-ui Select value, you need to provide 'renderValue' prop:

  renderValue={selected => selected.map(item => item.firstName).join(', ')}

You can refer to this CodeSandbox example

Answer 2

You can't use an object as the value for the input, it needs to be a string.

Also you haven't handled the onChange to update the array to add/remove items.

As a simple example.

const userContributors=["joe", "bob", "tim"]

...

const [ApplicationAdminUsers, SetApplicationAdminUsers] = useState(["joe"]);

...

<Select
 multiple
 value={ApplicationAdminUsers}
 onChange={(event)=> SetApplicationAdminUsers(event.target.value)}  
 className="multi-input-padding"
 validators={["required"]}
 errorMessages={["Select Application Admin"]}
 input={
   <OutlinedInput
      labelWidth={labelWidth}
      id="select-multiple-checkbox"
    />
  }
  MenuProps={MenuProps}
>