React MUI Select Checkbox Error Getting Multiple Values

JavaScript
1

Hi,

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

react-select
react-select730×233 7.02 KB

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
            }
        }
    ],
2

I resulted to not using checkboxes, i used this instead

<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>
3

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.