Hello dear Netlify community, I’m trying to pass (potentially) mulitple checkbox values to Netlify forms, I’ve found this post with the same issue Checkboxes Not Passing Multiple for Gatsby Site through Netlify Form - #8 by Dennis but could not get the code submitted as the last entry to work.
The rest of my form works great, this is a Gatsby site, I’ve tried to search the netlify docs for how to handle checkboxes in Netlify with react but could not find what I was looking for.
I suspect my error is in my handleChange method, so I’ll start with that:
const handleChange = e => {
if (e.target.name === "inqueryType") {
const inqueryType = [...state.inqueryType, e.target.value]
setState({ ...state, inqueryType })
} else {
setState({ ...state, [e.target.name]: e.target.value })
}
}
My radio buttons are created by mapping an array of radio boxes fetched through a headless CMS
<fieldset>
<legend>Inquery type</legend>
{formData.radioButtons.map((node, index) => (
<>
<p>
<label key={index}>
<input
type="checkbox"
id="inqueryType"
name="inqueryType[]"
ref={register()}
value={node}
onChange={handleChange}
key={(node, "checbox")}
/>
{node}
</label>
</p>
</>
))}
</fieldset>
In Netlify I can only see one of the passed values, not multiple. My console.log after submitting in local host gives shows me the array
Any ideas on how I could solve this? I would also really appriciate the netlify react docs showing how to handle multiple checkboxes.