How to make use of Radio Group with useFormik Hook

Question

I am trying to get useFormik to validate radio groups, but it seems not to work, here is a brief example of what I am doing, whenever I submit the form after checking any of the radio input, formik throws validation error, ({currState:"you must choose property state"}), even though I choose an option. I realized getFieldProps attaches value field to the radio, so i tried using defaultValue then react throws an error about choosing one of controlled and uncontrolled components.

     import { useFormik } from "formik"
     export function ListProperty(){
     const { handleSubmit, getFieldProps, touched, errors } = useFormik(
             {
           initialValues: {
            currState:"",
          },
      validationSchema:Yup.object().shape({
         currState:Yup.string().required("you must choose property state")
     }),
     return (
        <form onSubmit={handleSubmit} >

         <div className="form-group inline">
            <div className="form-control">
              <input type="radio" 
              name="currState"  
              {...getFieldProps("currState")} 
              value="serviced" 
              />
              <label>serviced</label>
            </div>

            <div className="form-control">
              <input 
              type="radio" 
              value="furnished" 
              name="currState"  
              {...getFieldProps("currState")} 
              />
              <label>furnished</label>
            </div>

            <div className="form-control">
              <input
                type="radio"
                value="newlybuilt"
               name="currState"  
              {...getFieldProps("currState")} 
              />
              <label>newly built</label>
            </div>

          </div>
           <button type="submit">submit </button>
           </form>
     )
   }

Answer 1

You need to map onChange like below.

<input 
  type="radio" 
  value="furnished" 
  name="currState"  
  onChange={getFieldProps("currState").onChange} 
/>

Answer 2

In my form that's work:

<label>
   <input type="radio" name="number" value="one" onChange={formik.getFieldProps("number").onChange}/>One
</label>
<label>
<input type="radio" name="number" value="two" onChange{formik.getFieldProps("number").onChange}/>Two
</label>

Answer 3

I gave up on the implementation with getFieldProps and did it simpler, like this:

import { useFormik } from 'formik'

export default function Component() {

  const formik = useFormik({
    initialValues: { 
      radioButtonValue: ''
    },
    onSubmit: values => console.log(values)
  })

  const handleRadioButtons = e => formik.values.radioButtonValue = e.target.value

  return (
   <form onSubmit={formik.handleSubmit}>
     <input 
       type="radio" 
       id="one"
       name="group" 
       value="One" 
       onChange={e => handleRadioButtons(e)}
       required
     />
     <label htmlFor="one">One</label>
     <br />

     <input 
       type="radio" 
       id="two"
       name="group" 
       value="Two" 
       onChange={e => handleRadioButtons(e)}
     />
     <label htmlFor="two">Two</label>

     <button type="submit">Submit</button>
   </form>
  )
}

Beware, if you use formik.values.radioButtonValue value as a useEffect dependency, then setting it like this: formik.values.radioButtonValue = e.target.value not gonna trigger the change, and useEffect won't launch (at least in my case it didn't). As an alternative, you gonna have to implement some kind of condition check with this value in your useEffect code

Answer 4

const formik = useFormik(
    {
        initialValues: {
            projectActivity: "Active"
        },
        onSubmit: (values) => {
            console.log(values);
        }
    }
);

<div className='flex flex-col'>
                    <label className='font-bold ml-1 my-1'>Project Activity</label>
                    <div className='flex justify-start items-center gap-x-3 mt-1'>
                        <input
                            type="radio"
                            name="projectActivity"
                            id="active"
                            value="Active"
                            onChange={formik.handleChange}
                            checked={formik.values.projectActivity === 'Active'}
                            className="radio"
                        />
                        <label htmlFor="active">Active</label>
                        <input
                            type="radio"
                            name="projectActivity"
                            id="inactive"
                            value="Inactive"
                            onChange={formik.handleChange}
                            checked={formik.values.projectActivity === 'Inactive'}
                            className="radio"
                        />
                        <label htmlFor="inactive">Inactive</label>
                    </div>
                </div>