useFormik hook with React-Modal

When I started using useFormik hook in React-Modal, Icame across so many problems in solving the issue. I shared the code snippet that will help you to unserstand how can we use react-modal with useFormik.

Taken it for granted you already have installed react-modal and formik using npm install, I am going to share code snippet that helps you understand integration of react-modal with useFormik.

In above code we have defined a component named RegistrationForm which accepts one boolean property isOpen which is responsible for opening and closing ReactModal.We have also used useFormik to set initial values,validationSchema and onSubmit handler.

In this part of code snippet we have defined a form in ReactModal. We have used formik to associate form element with formik’s handler.The trivial part is instead of submit button we need to define a button with type button and onclick of button we have called formik.handleSubmit().

In the given code, I have tried to keep the code as simple as possible to help easy implementation.