CODEWITHSUNDEEP
reactjscomboboxmantine
keil
keil

Reputation: 433

Mantine React Combobox how to get key. form dowpdown option

  const listOptions = filteredOptions.map((item) => (
    <Combobox.Option value={item.label} key={`${item.id}`}>
      {item.label}
    </Combobox.Option>
  ));

  return (
    <Combobox
      onOptionSubmit={(value, (Ideally key is here) => {
        console.log('value', value);
        console.log('key', key); <-- how do I fetch this value?
      }}

given that my key is the ID of my item I would like to get the key value from my Combobox.Option. I currently can not find any elegant way to do this. are there any suggestions?

Upvotes: -1

Views: 81

Answers (2)

keil
keil

Reputation: 433

Because keys are are internal to react and are not accessible. I had to do a workaround of {value}__{id} then parse the Id off of the value for the client facing portion then parse the ID for my api portion

Upvotes: 0

Deyan Yonkov
Deyan Yonkov

Reputation: 1

  const opts = [
    { id: 1, label: 'Option 1' },
    { id: 2, label: 'Option 2' },
    { id: 3, label: 'Option 3' },
  ];

  return (
    <Combobox
      onOptionSubmit={(val) => {
        const { id, label } = JSON.parse(val);
        console.log('Selected label:', label);
        console.log('Corresponding id:', id);
      }}
    >
      {opts.map((i) => (
        <Combobox.Option
          value={JSON.stringify({ id: i.id, label: i.label })}
          key={i.id}
        >
          {i.label}
        </Combobox.Option>
      ))}
    </Combobox>
  );

Upvotes: 0

Related Questions