iusehooks / usetheform

React library for composing declarative forms, manage their state, handling their validation and much more.
https://iusehooks.github.io/usetheform/
MIT License
86 stars 33 forks source link

Error using Collection array with @mui/material Checkbox #42

Closed lrkwz closed 2 years ago

lrkwz commented 2 years ago

When I use <Collection /> of type array build around some <Checkbox /> I receive the following error:

The prop "name": apple of type "string" passed to "<Input />" it is not allowed within context a of type "array".

See https://codesandbox.io/s/collection-array-with-mui-checkbox-values-zh1sv and try to replace object with array

iusehooks commented 2 years ago

As documentation says:

If your Collection is rendered within a Collection array, name is not allowed as a prop.

https://iusehooks.github.io/usetheform/docs-collection

What are you trying to achieve? which is the output expected?

Have a look at https://codesandbox.io/s/collection-array-with-mui-checkbox-values-forked-bigzk?file=/src/App.js

lrkwz commented 2 years ago

I expected the output to be ["apple", "banana", "pineapple"].

your example outputs {"myPreferredFruit":[null,true,true]}.

If you add the value prop to each of the Checkboxes the result is even stranger being {"myPreferredFruit":["apple","banana",true]} (I'm confused: why does the last one have value true instead of pineapple?).

The only "workaround" I can think of is using object instead of array and the call something like Object.entries(myPreferredFruit).map(x => x[0]) to reduce the Object to a simplear and cleaner array.

BTW what is withIndex? I didn't find it in th docs.

iusehooks commented 2 years ago

If you want to get back a spefic value instead of true/false from a checkbox you have to pass that value as prop to the checkbox.

Working example at: https://codesandbox.io/s/collection-array-with-mui-checkbox-values-forked-bigzk?file=/src/components/Checkbox.js

You can read about withIndex at: https://iusehooks.github.io/usetheform/docs-collection#array-collection

Thanks.

lrkwz commented 2 years ago

Thank you!