Search code examples
reactjsmaterial-uiformikyup

MaterialUI Radio buttons with Formik - value not set onSubmit


I have a formik form in react using MaterialUI, and all of the controls are passing their values onsubmit except the radio button group.

Here's my setup, am I missing an attribute formik needs or have something out of place? It seems to match examples I see elsewhere. There is no validation schema for this field at the moment.

const formik = useFormik({
            initialValues: {
                email: '',
                packageType: '',
            },
            validationSchema: validationSchema,
            onSubmit: (values) => {
                sendRequestEmail(values);
            },
        });

<FormControl component="fieldset">
                            <RadioGroup
                                aria-label="Package type"
                                name="packageType"   
                                defaultValue="Basic Package"
                                onChange={formik.handleChange}                   
                            >
                                {data.strapiPricingPage.cookie_types.map((item) => (
                                    <FormControlLabel key={item.CookieType} value={item.CookieType} control={<Radio />} label={item.CookieType} />                            
                                ))}
                            </RadioGroup>
                        </FormControl>

Solution

  • Apparently it needs to be at the line item level and not in RadioGroup where the examples show it being:

    <FormControl component="fieldset">
                                <RadioGroup
                                    aria-label="Package type"
                                    // name="packageType"   
                                    defaultValue="Basic Package"
                                    //onChange={formik.handleChange}                   
                                >
                                    {data.strapiPricingPage.cookie_types.map((item) => (
                                        <FormControlLabel onChange={formik.handleChange} name="packageType" key={item.CookieType} value={item.CookieType} control={<Radio />} label={item.CookieType} />                            
                                    ))}
                                </RadioGroup>
                            </FormControl>