1

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>

enter image description here

soccerway
  • 10,371
  • 19
  • 67
  • 132

1 Answers1

1

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 !"}
      />
The KNVB
  • 3,588
  • 3
  • 29
  • 54
  • Will try that today evening and let you know...Can I have that name and email in two column ..is that possible ? – soccerway Aug 11 '21 at 01:47
  • Sorry just tried quickly in the codesandbox link..I cant see email though ! – soccerway Aug 11 '21 at 01:48
  • 1
    You may view my work: https://replit.com/@KNVB/testing1 – The KNVB Aug 11 '21 at 03:00
  • Sorry I would have been more clearer to you. I was looking for email to display in the drop down along with name, I mean when you click drop downbox I should see checkbox, name and email inside to select it ...I have added a screen shot for reference. – soccerway Aug 11 '21 at 04:08
  • I have updated my solution, and you check the result from the above link. – The KNVB Aug 11 '21 at 04:30