I am working on a for with react material ui v4. The form has a multiple select that looks like this:
const [assignee_id, setAssigneeId] = useState([]);
<TextField
id="outlined-select-user"
select
fullWidth
variant="outlined"
label="Select"
multiple
renderValue={(selected) => selected.join(', ')}
value={assignee_id}
onChange={(event) => { setAssigneeId(event.target.value); console.log("selected user", event.target.value) }}
helperText="Please select a resource"
>
{sysusers.map((option) => (
<MenuItem key={option.id} value={option.id}>
<Checkbox checked={[option.id].indexOf(option.fullnames) > -1} />
<ListItemText primary={option.fullnames} />
{/* {option.fullnames} */}
</MenuItem>
))}
</TextField>
I can only be able to select one value, and when i try to get the index of the checked values like this:slight_smile:
<Checkbox checked={[option.id].indexOf(option.fullnames) > -1} />
i get the error ``` option.id.indexOf... is not a function.
Any recommendations or advice on how i can get the value of multiple users will be appreciated.
The sysusers array looks like this:
"sysusers": [
{
"id": 0,
"fullnames": "TIM WA",
"email": "TW@xxcom",
"status": "Active",
"extension": null,
"disabled": true,
"updated_by": 0,
"created_by": 0,
"team": 0,
"role": 0,
"directreport": 0,
"date_created": "2021-10-12T11:59:37.000+0000",
"date_updated": "2021-10-13T09:16:24.000+0000",
"view": null,
"roles": {
"id": 0,
"role_name": "ICT ADMINISTRATOR",
"created_by": 0,
"updated_by": null,
"date_created": "2021-10-12T12:01:47.000+0000",
"date_updated": "2021-10-12T12:01:47.000+0000"
},
"teams": {
"id": 0,
"name": "ICT APPLICATIONS",
"user": null,
"team_lead": 1,
"updated_by": 0,
"created_by": 0,
"date_created": "2021-10-12T12:01:00.000+0000",
"date_updated": "2021-10-22T08:42:48.000+0000",
"isParent": true,
"parent_team": null
}
},
{
"id": 1,
"fullnames": "Jom Omon",
"email": "jom@xx.com",
"status": "Active",
"extension": "10643",
"disabled": true,
"updated_by": null,
"created_by": 0,
"team": 0,
"role": 1,
"directreport": null,
"date_created": "2021-10-22T08:42:39.000+0000",
"date_updated": null,
"view": null,
"roles": {
"id": 1,
"role_name": "TEAM LEAD",
"created_by": 0,
"updated_by": 0,
"date_created": "2021-10-13T07:44:56.000+0000",
"date_updated": "2021-10-13T07:44:56.000+0000"
},
"teams": {
"id": 0,
"name": "ICT APPLICATIONS",
"user": null,
"team_lead": 1,
"updated_by": 0,
"created_by": 0,
"date_created": "2021-10-12T12:01:00.000+0000",
"date_updated": "2021-10-22T08:42:48.000+0000",
"isParent": true,
"parent_team": null
}
},
{
"id": 3,
"fullnames": "John Doe",
"email": "john@xx.com",
"status": "Active",
"extension": "10760",
"disabled": false,
"updated_by": null,
"created_by": 0,
"team": 2,
"role": 1,
"directreport": null,
"date_created": "2021-10-22T09:23:52.000+0000",
"date_updated": null,
"view": null,
"roles": {
"id": 1,
"role_name": "TEAM LEAD",
"created_by": 0,
"updated_by": 0,
"date_created": "2021-10-13T07:44:56.000+0000",
"date_updated": "2021-10-13T07:44:56.000+0000"
},
"teams": {
"id": 2,
"name": "MARKETTING",
"user": null,
"team_lead": 3,
"updated_by": 0,
"created_by": 0,
"date_created": "2021-10-22T09:23:28.000+0000",
"date_updated": "2021-10-22T09:24:01.000+0000",
"isParent": true,
"parent_team": null
}
}
],
I resulted to this, without using checkboxes:
<label style={{ fontWeight: 'bold', color: 'black' }}> Add A Resource: </label>
<FormControl
fullWidth
className={classes.selectFormControl}
>
<InputLabel
htmlFor="multiple-select"
className={classes.selectLabel}
>
Select Resource
</InputLabel>
<Select
multiple
value={assignee_id}
variant="outlined"
onChange={(event) => {
const value = event.target.value;
setAssigneeId(value)
}}
MenuProps={{ className: classes.selectMenu }}
classes={{ select: classes.select }}
inputProps={{
name: "multipleSelect",
id: "multiple-select",
}}
>
{sysusers && sysusers.map((option) => (
<MenuItem key={option.id} value={option.id}
classes={{
root: classes.selectMenuItem,
selected: classes.selectMenuItemSelectedMultiple,
}}>
{option.fullnames}
</MenuItem>
))}
</Select>
</FormControl>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.