Keys being displayed instead of labels

[youngestdj]

If I have an array of ids and names like

[
  {key: 1, label: "Some car"},
  {key:2, label: "Another car"}
]

If the user selects just one it displays the key on the button instead of the label. The label should be displayed then you can get the keys with handleOnChange

[stefanDeveloper]

I have implemented Typescript support and the code varies from the old implementation. As soon as a new release has been published, could retest it and update your findings?

[youngestdj]

Alright sure.

[kfrancikowski]

@youngestdj please check how it works now. I've published new version on NPM and github.

[youngestdj]

@kfrancikowski It works now, kudos.

[youngestdj]

I'm not sure if it's the intended behaviour or not, but when you get the selected items with handleOnChange it returns the labels instead of the keys.

[kfrancikowski]

And what type of options do you provide? Examples:

const options = [
  { key: 1, label: "Potatoes" },
  { key: 2, label: "Apples" },
  { key: 3, label: "Bananas" },
  { key: 4, label: "Mango" },
];

const optionsSimple = ["Potatoes", "Apples", "Bananas", "Mango"];

with optionsSimple it will return labels, because there is no key available.

[youngestdj]

@kfrancikowski My bad. I forgot I wasn't passing the keys because of the earlier behavior. I was using a custom function to get the keys from the name. It works fine now. Thanks

[youngestdj]

@kfrancikowski This isn't related, but I have not been able to get getOptionKey and getOptionLabel to work for me. Let's say I have an array like

const options = [
  { id: 1, name: "Potatoes" },
  { id: 2, name: "Apples" },
  { id: 3, name: "Bananas" },
  { id: 4, name: "Mango" },
];

I can simply do

<DropdownMultiSelect
  getOptionKey='id'
  getOptionLabel='name'
 />

to make it use the ids and names instead of keys and labels right? It doesn't work for me it throws an error

[kfrancikowski]

Please try now, but use optionKey and optionLabel props. I've just updated Readme

[youngestdj]

The props do not work for me. Same old error using "react-multiselect-dropdown-bootstrap": "^1.0.16"

[kfrancikowski]

I've just tried with version 1.1.0 and this code below and it seems that everything is working fine now:

const options = [
  { id: 1, name: "Potatoes" },
  { id: 2, name: "Apples" },
  { id: 3, name: "Bananas" },
  { id: 4, name: "Mango" },
];

const optionsSimple = ["Potatoes", "Apples", "Bananas", "Mango"];

function App() {
  return (
    <div className="App">
      <div className="row">
        <div className="col-md-4">
          <DropdownMultiselect options={optionsSimple} name="dropdown1" handleOnChange={(selected) => {console.log(selected)}} />
        </div>
        <div className="col-md-4">
          <DropdownMultiselect optionLabel="name" optionKey="id" options={options} name="dropdown2" handleOnChange={(selected) => {console.log(selected)}} />
        </div>
      </div>
    </div>
  );
}

export default App;