Clear Radio buttons on Submit without getting errors

Question

I want to clear the radio button values without getting errors of react in NextJS, i did manage to do in the other fields like in the example below...

 <div className="col-md-6">
   <label className="col-md-12 control-label"><strong>Ciudad de residencia</strong></label>
   <div className="inputGroupContainer mx-auto">
      <div className="input-group input-group-dynamic mb-4">
         <span className="input-group input-group-dynamic mb-4-addon"><i className="glyphicon glyphicon-user"></i></span>
         <input {...register('city', { required: true, pattern: /^[A-Za-z]+$/i })} placeholder="Ciudad" className="form-control" type="text" value={city} onChange={e => setCity(e.target.value) }/>
      </div>
   </div>
   {errors.city && <span>Ingrese Ciudad de residencia</span>}
</div>

But in Radio Buttons i cannot manage to clear them, tried several ways but setChecked returns the following error

Error: Invalid hook call. Hooks can only be called inside of the body of a function component.

My code is below, so you can see some examples, it's not the full code, only so you can see how i cleaned the other fields using ('') in the function, but in radio i cannot do that beacuse it's a variable... Hope you can help me with this. Thanks.

  const [nombre, setNombre] = useState('')
  const [dni, setDNI] = useState('')
  const [email, setEmail] = useState('')
  const [city, setCity] = useState('')
  const [area, setArea] = useState('')
  const [capacitacion, setCapacitacion] = useState('')
  const [impacto, setImpacto] = useState('')
  const [{checkedNo, checkedSi}, setChecked] = useState('')

    async function onSubmit(e) {
    axios.post('http://localhost:3000', {
        data: {
            Nombre: nombre,
            DNI: dni,
            Correo: email,
            Ciudad: city,
            Sector: sector,
            Area: area,
            OSC: seleccion,
            Capacitacion: capacitacion,
            Impacto: impacto
         }
    })
    .then(response => {
        console.log(response);
        setShowMe(!showMe);
        setNombre('')
        setEmail('')
        setDNI('')
        setCity('')
        setArea('')
        setSector('')
        setOSC('')
        useState({ setChecked: false })
    });
  
  }

UPDATED CODE:

    <div className="selectContainer mx-auto">
   <label className="col-md-12 control-label"><strong>¿Finalizó el Curso de Capacitación virtual?</strong></label>
   <div className="form-check">
      <input {...register("capacitacion", { required: true })} value="no" className="form-check-input" type="radio" name="capacitacion" id="no" checked={checked} onChange={e => setCapacitacion(e.target.value)} onClick={e => setChecked(e.target.value)} />
      <label className="form-check-label" htmlFor="no">
      No
      </label>
   </div>
   <div className="form-check">
      <input {...register("capacitacion", { required: true })} value="si" className="form-check-input" type="radio" name="capacitacion" id="si" checked={checked} onChange={e => setCapacitacion(e.target.value)} onClick={e => setChecked(e.target.value)} />
      <label className="form-check-label" htmlFor="si">
      Sí
      </label>
   </div>
   {errors.capacitacion && <span>Seleccione una opción</span>}
</div>

SOLVED:

In my HTML the value must match the checked variable... like this. I really missed it. Thanks

value="Si" className="form-check-input" type="radio" name="capacitacion" id="si" checked={checked === 'Si'}

Answer 1

The error tells you what's wrong. You can't declare a hook inside a condition or a function like you're doing inside your .then callback (remove this: useState({ setChecked: false })). It has to be declared at the root of your component:

function MyComponent(){
   // declare your useState hook here
   const [checked, setChecked] = useState(false)


   async function handleSubmit(){
     axios.post('http://localhost:3000').then(() => {
       // call setState method from useState
       setChecked(false)
     })

   }

}