In a react Multiselect dropdown I would like to display name and email along with the checkbox in the same level (as per the screenshot attached ) is that possible using multiselect-react-dropdown
?
I have tried below, but it is still the name only. How can we insert email along with name option may be in fade color, any advise ?
Added the codesandbox test link: https://codesandbox.io/s/stoic-cartwright-9tb3i?file=/src/App.js:395-419
import Multiselect from 'multiselect-react-dropdown';
const options = [
{ key: 'Dan', email: 'dan@test.com', id: 1},
{ key: 'Crots', email: 'crots@test.com', id: 2},
{ key: 'Sum', email: 'sum@test.com', id: 3},
{ key: 'Tim', email: 'tim@test.com', id: 4}
];
const [selectedOption, setSelectedOption] = useState([]);
const handleTypeSelect = (e) => {
const copy = [...selectedOption];
copy.push(e);
setSelectedOption(copy);
};
<div className="nomineeSelectBox">
<div id="dialog2" className="triangle_down1"/>
<div className="arrowdown">
<Multiselect
onSelect={handleTypeSelect}
options={selectedOption.length + 1 === maxOptions ? [] : options}
displayValue="key"
showCheckbox={true}
emptyRecordMsg={"Maximum nominees selected !"}
/>
</div>
</div>
You may try to add the following code:
options.forEach(option=>{
option.displayValue=option.key+"\t"+option.email;
})
Before the return statement. And then change the following code:
<Multiselect
onSelect={handleTypeSelect}
onRemove={handleTypeRemove}
options={selectedOption.length + 1 === maxOptions ? [] : options}
displayValue="key"
showCheckbox={true}
emptyRecordMsg={"Maximum nominees selected !"}
/>
to
<Multiselect
onSelect={handleTypeSelect}
onRemove={handleTypeRemove}
options={selectedOption.length + 1 === maxOptions ? [] : options}
displayValue="displayValue"
showCheckbox={true}
emptyRecordMsg={"Maximum nominees selected !"}
/>