<MultiSelect
label="Your favorite Rick and Morty character"
placeholder="Pick all that you like"
data={[
{ value: 'rick', label: 'Rick', group: 'Used to be a pickle' },
{ value: 'morty', label: 'Morty', group: 'Never was a pickle' },
{ value: 'beth', label: 'Beth', group: 'Never was a pickle' },
{ value: 'summer', label: 'Summer', group: 'Never was a pickle' },
]}
/>
When using numeric values (stringified) React will show up an error:
<MultiSelect
label="Your favorite Rick and Morty character"
placeholder="Pick all that you like"
data={[
{ value: "1", label: "Rick", group: "Used to be a pickle" },
{ value: "2", label: "Morty", group: "Never was a pickle" },
{ value: "3", label: "Beth", group: "Never was a pickle" },
{ value: "4", label: "Summer", group: "Never was a pickle" },
]}
/>
Warning: Encountered two children with the same key, `1`. Keys should be unique so that components maintain their identity across updates. Non-unique keys may cause children to be duplicated and/or omitted — the behavior is unsupported and could change in a future version.
This warning only occurs when using groups.
In which browser did the problem occur
All
If possible, please include a link to a codesandbox with the reproduced problem
No need
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
Yes
Possible fix
I guess there is an issue in Key generation but I did not look into the code yet.
What package has an issue
@mantine/core
Describe the bug
This is the code from the docs:
When using numeric values (stringified) React will show up an error:
This warning only occurs when using groups.
In which browser did the problem occur
All
If possible, please include a link to a codesandbox with the reproduced problem
No need
Do you know how to fix the issue
No
Are you willing to participate in fixing this issue and create a pull request with the fix
Yes
Possible fix
I guess there is an issue in Key generation but I did not look into the code yet.