CODEWITHSUNDEEP
reactjsmaterial-uiformikcolor-picker
Arfizur Rahman
Arfizur Rahman

Reputation: 394

React Material UI Color Picker with Formik

I'm trying to use material-ui-color picker with Formik. I'm using React Material UI FormControl. Here's what I've tried for the color picker:

 <FormControl
     variant="outlined"
     error={Boolean(touched.color_code && errors.color_code)}>
        <ColorPicker
             id="color_code"
             defaultValue="#03a9f4"
             onChange={handleChange}
             value={values.color_code}
             aria-describedby="color_code-error-text"
             name="color_code"
        />
        {touched.color_code && errors.color_code ? (
            <FormHelperText id="color_code-error-text">
                {errors.color_code}
            </FormHelperText>
            ) : null
        }
 </FormControl>

Now, the issue is that, the selected color code is not being populated inside formik form values when I'm submitting the form.

Any help would be highly appreciated. Thanks in advance.

Upvotes: 1

Views: 760

Answers (1)

Nick Sourvanos
Nick Sourvanos

Reputation: 11

The onChange function provides the hex code directly. You can use the setFieldValue function provided from useFormik hook. So try doing the following:

<ColorPicker
  id="color_code"
  defaultValue="#03a9f4"
  onChange={(value) => setFieldValue("color_code", value)}
  value={values.color_code}
  aria-describedby="color_code-error-text"
  name="color_code"/>

I hope this helps!

Upvotes: 1

Related Questions