search

surevine / govuk-react-jsx

govuk-frontend compatible React components
https://govuk-react-jsx.netlify.app/
MIT License
3 stars 0 forks source link

Is it possible to use multiple single checkboxes that are part of the same field array using a map loop #69

Closed brightpixels closed 4 years ago

brightpixels commented 4 years ago

Hello, Are there any examples of using checkboxes, that are part of the same field array, but rendered using a map loop? I am looking for examples using Fomik and React-hooks-form

The current examples assume that list of checkboxes are rendered one after the other. I have a scenario where I need to loop over an array of items with a checkbox for each.

I hope question makes sense Thanks

andymantell commented 4 years ago

I think I get what you're saying but could you scribble up a quick mock up and post it so I know what you're aiming for? Even if it's just done in MS paint!

Also, you mention two form libraries... Do you need code examples for both or just the one?

If you could do that, I'll have a look Monday morning and see the best way to achieve what you want

brightpixels commented 4 years ago

Something like this: https://codesandbox.io/s/formik-checkboxes-array-x393g

Kind of works, only issue I see is around clicking on the checkbox labels. For example, the second label ('Keep 56') is wired up to the first checkbox. I understand why this is happening due to the label for attribute not getting an increment of 2, 3, 4 etc as each array of Checkboxes only ever has one item.

I am working with Formik so a Formik example would great.

Also, can you help to work out why my import of govuk-frontend/frontend/all in App.js isn't working please. Using the components, the expected classes are applied but for some reason the govuk-frontend stylesheet aren't available

andymantell commented 4 years ago

Is this sort of what you're looking for?

https://codesandbox.io/s/formik-checkboxes-array-i05vv

It's still a bit hard to see what you're aiming for with all the Lorem ipsum - hard to understand the purpose of this and get the semantics right. But I think I have done what you wanted, whilst making it look like govuk? Let me know if you have any other questions.

It's worth noting that this library just replicates the capabilities of the govuk-frontend nunjucks templates. There will be occasions where these don't quite meet your needs - it's completely ok in these situations to break out and make custom components just reusing the base govuk-frontend classes. Don't feel you have to use the <Checkboxes> component to make a checkbox - just write a raw html <input type="checkbox">, apply the govuk classes to style it up, and wire it up to formik with onChange handlers etc.

As for the sass not compiling, you weren't quite importing it correctly. It should be @import "~govuk-frontend/govuk/all";

brightpixels commented 4 years ago

This is perfect. My issue was the idPrefix not being dynamic. Thanks for the tip about directly using class names when components/nunjucks aren't a good fit.

Regarding the the sass import wasn't working because I haven't actually imported the sass file in one of the JS files! Thanks again.