The const object defined as such
const [selectedItems, setSelectedItems] = useState([]);
const options = [
{
key: 'A',
value: 'A',
label: 'A'
},
{
key: 'S',
value: 'S',
label: 'S'
},
{
key: 'W',
value: 'W',
label: 'W'
},
{
key: 'C',
value: 'C',
label: 'C'
},
];
The Select element definition
<Select
mode='multiple'
value={selectedItems}
defaultValue={options}
showSearch={true}
allowClear
optionLabelProp='label'
placeholder={
<div>
{' '}
<img
src={xImg}
alt='xImg'
style={{ width: 14, height: 14, objectFit: 'cover' }}
/>{' '}
Place Holder {' '}
</div>
}
style={{ width: '100%' }}
dropdownRender={ () => {
<Menu style={{ width: 256, alignContent: 'center' }}>
{options.map((option) => (
<Menu.Item
key={option.key}
onClick={e => {
if (selectedItems.includes(option.label)) {
const newArray = selectedItems.filter(val => val !== option.label)
setSelectedItems(newArray)
} else {
const newArray = [...selectedItems, option.label]
setSelectedItems(newArray)
}
}}
>
{option.label}
<Checkbox style={{ float: 'left' }} checked={selectedItems.includes(option.label)} />
</Menu.Item>
))}
</Menu>
}}
/>
Did I use the dropdownRender in the right way?
I tried disable value={} defaultValue={} and placeholder{} properties for select and also tried remove the onClick action for Menu.Item but doesn’t help.