MultiSelect, extra fields | Mantine | Page 1

crystal kindle Oct 10, 2022, 9:28 AM

#

Hi everyone,

I'm trying to create a MultiSelect with an object as the value, but I've come to the issue that the MultiSelect won't show my selected values.

Is there a way to display my selected values or is there another way to pass extra fields?

fresh bear Oct 10, 2022, 9:30 AM

#

could you show some code/make a minimal codesandbox?

crystal kindle Oct 10, 2022, 9:32 AM

#

MultiSelect element

<MultiSelect
  data={multiSelectData}
  label="Products"
  description="Select products"
/>

multiSelectData

const multiSelectData = [
  { label: "produc1", value: { itemID: 1, label: "product1"}}
]

#

MultiSelect is controlled (Left it out for better readability)

#

I map over the MultiSelect value and create a <TextArea> for each selected product

#

and I want to display the label of the product in the label of the TextArea

crystal kindle Oct 10, 2022, 9:36 AM

#

fresh bear could you show some code/make a minimal codesandbox?

If you want I can also create a sandbox if it's not clear enough

#

I tried to fix it setting the valueComponent prop like this:

#

But there is no remove button

#

and re-coding that would seem silly

fresh bear Oct 10, 2022, 9:40 AM

#

yeah that's your problem - do value: ${yourItemIdVariable}

#

label and value should he strings otherwise it will give you problems

crystal kindle Oct 10, 2022, 9:40 AM

#

Okay

#

Can I just add extra fields to my multiSelectData object?

fresh bear Oct 10, 2022, 9:40 AM

#

you can make an object or map lookup, using your IDs to look up your full extended objects based on the ID value

crystal kindle Oct 10, 2022, 9:41 AM

#

I assume it's not possible to send the label prop to the MultiSelect value?

#

Because it only sends the value

fresh bear Oct 10, 2022, 9:42 AM

#

no, they're separate

#

you can make label and value exactly the same if you want, you can also use string[] if you want them both to be the same

crystal kindle Oct 10, 2022, 9:43 AM

#

fresh bear no, they're separate

Ah okay

#

yeah I need both label and itemid, but I'll just search in the array of products for a matching itemID

#MultiSelect, extra fields