I have a Form in which I'd like users to be able to select zero or more items from a table. Rows in this table should contain a checkbox, and clicking the checkbox will include or exclude the corresponding item from the Field's value. Perhaps the value will be a comma-separated list of the IDs of all the selected items. An array is fine too.
Let's say we're doing an online purchase form for a fast food restaurant where customers have a small catalog of products to purchase from. Maybe this is the entire product table:
Id: 1, Name: Hamburger, Price: $5
Id: 2, Name: Fries, Price: $2
Id: 3, Name: Soda, Price $2
The user would see:
[ ] Hamburger
[ ] Fries
[ ] Soda
If the user chooses a hamburger and soda, the SelectedItems value will be "1, 3" (or hopefully [1, 3]). The end result is that after pushing the submit button, the onSubmit event will fire with a values object like this:
{ OrderId: 1234, SelectedItems: [1, 3], PaymentMethod: "cash" }
How can I use the Forms API to achieve this? I thought perhaps a FieldArray would help, but I didn't see any examples of that class in use. The online docs pretty much just say that a FieldArray has a "component" property and that the component does stuff with a FieldArrayRenderProps. No actual examples.
My two questions:
- How would you recommend I implement the table as described above?
- What is an example of a typical use of a FieldArray?