My handle user selection for the multi-select on my modal:
const handleUserSelection = (selectedOptions) => {
const userIds = selectedOptions.map(option => option.value);
setSelectedUsers(userIds);
};
const options = users.map(user => ({
value: user.id,
label: `${user.profile.position_designation} - ${user.profile.first_name} ${user.profile.last_name}`
})); ```
My actual modal:
``` <Modal
show={modal.show}
onHide={handleHideModal}
backdrop='static'
keyboard={false}>
<Modal.Header closeButton>
<Modal.Title> Forward Document </Modal.Title>
</Modal.Header>
<Modal.Body>
<Row>
<Col md={'auto'}>
<Form.Label>Assign to <span className='text-muted'>(Optional)</span>:</Form.Label>
<Select
isMulti
name='assignTo'
options={options}
value={options.filter(option => selectedUsers.includes(option.value))}
onChange={handleUserSelection}
/>
</Col>
</Row>
</Modal.Body>
<Modal.Footer>
<Button variant='secondary' onClick={handleHideModal} disabled={modal.isLoading}>
Cancel
</Button>
<Button type='submit' variant='primary' disabled={modal.isLoading}>
Forward
</Button>
</Modal.Footer>
</Modal> ```
Lastly, see the fourth picture to see the network response in my browser. I am sorry if something is confusing, English is not my first language.