Send data to the server via Formik

Question

I have registerHandler should send data to the server.

And in Formik I have onSumbit

                    <Formik
                        initialValues={{
                            firstName: '',
                            lastName: '',
                            email: '',
                            password:''
                        }}
                        validationSchema={SignupSchema}
                        onSubmit={(
                            values: Values,
                            {setSubmitting}: FormikHelpers<Values>,
                                **const registerHandler** = async () => {
                                    const authData = {
                                        email:values.email,
                                        password:values.password,
                                        returnSecureToken:true
                                    }
                                    try {
                                  const response = await axios.post('Link', authData)
                                        console.log(response.data)
                                    }catch (e){
                                        console.log(e)
                                    }
                                }

                        ) => {
                            setTimeout(async () => {
                                setSubmitting(false);
                            }, 500);
                        }}
                    >

There’s a button down there who can't see registerHandler

<button type="submit" className='settings-button' onClick={registerHandler}>Register</button>

How do I make it right that I can transmit to a button registerHandler?

Answer 1

You can bind registerHandler function with onSubmit prop of Formik:

const registerHandler = async (values, { setSubmitting }) => {
  const payload = {
    // make payload here using values
  }
  try {
    const response = await axios.post('write_url_here', payload)
    console.log(response.data)
  } catch (e) {
    console.log(e)
  } finally {
    setSubmitting(false)
  }
}

// in render function's return

<Formik
  initialValues={{
    firstName: '',
    lastName: '',
    email: '',
    password: '',
  }}
  onSubmit={registerHandler} // HERE
>
{(formik) => (
    <form onSubmit={formik.handleSubmit}>
    
      <label htmlFor="firstName">First Name</label>

      <input id="firstName" type="text" {...formik.getFieldProps('firstName')} />

      {formik.touched.firstName && formik.errors.firstName ? (
        <div>{formik.errors.firstName}</div>
      ) : null}

      <button type="submit" className='settings-button'>Register</button>

    </form>
  )}
</Formik>

Note that you don't need to attach a click handler to the Register button because it is of type submit and is inside a form. So this button will automatically "submit" the form, i.e. invoke the onSubmit on the form which will trigger formik.handleSubmit and that finally triggers the function registerHandler.