Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – 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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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


  2. 0 
      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>
  );
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search