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 (
<>
{(props) => (
)}
)
}
export default AddEdit
So here , we created a function and hence we added the code.
