React Hook Form - Combined Add/Edit (Create/Update) Form Example

Today we are going to perform a crud app where we will add and edit the form with same component .
We will use react-router-dom , formik and yup. so let's dive to the code.

Create a component as AddEdit.js

import React, { useEffect, useState } from 'react'
import { Formik, Form } from 'formik'
import { useMutation, useQuery, useQueryClient } from 'react-query'


const AddEdit = () => {

  const history = useHistory()

  const user = useUser()

  const params: any = useParams()

  const queryClient = useQueryClient()

  const id: number = Number(params?.id)

  const isAddMode = !id

  const { data, isLoading, isError } = useQuery(['data', id], () => getData(id), {
    enabled: !!id,
  })

  const onFormSubmit = (values: any) => {
    isAddMode ? addFnc : editFnc
  }

  const initValues = {
    name: isAddMode ? '' : data?.name
  }

  return (
    <>
      <div className=''>
        <Formik validationSchema={Schema} initialValues= {initValues} onSubmit={onFormSubmit}>
          {(props) => (
            <Form className='w-100 pb-10'>
              <Field name="name" />
              <button
                type='submit'>
                  'Submit'
              </button>
            </Form>
          )}
        </Formik>
      </div>
    </>
  )
}

export default AddEdit

So here , we created a function and hence we added the code.