From eee3104c1816ed5091567950615166cfca10f464 Mon Sep 17 00:00:00 2001
From: binh-dam-ibigroup <56846598+binh-dam-ibigroup@users.noreply.github.com>
Date: Wed, 30 Sep 2020 09:28:34 -0400
Subject: [PATCH] refactor(ApiUserForm): Use Formik.Field to wire inputs
 automatically.

---
 components/ApiUserForm.js | 21 +++++++--------------
 1 file changed, 7 insertions(+), 14 deletions(-)

diff --git a/components/ApiUserForm.js b/components/ApiUserForm.js
index 9ff1b8b..07f30a0 100644
--- a/components/ApiUserForm.js
+++ b/components/ApiUserForm.js
@@ -1,5 +1,5 @@
 import clone from 'clone'
-import { Formik } from 'formik'
+import { Field, Formik } from 'formik'
 import { Component } from 'react'
 import { Button, Card, Col, Container, Form, Row } from 'react-bootstrap'
 import { withAuth } from 'use-auth0-hooks'
@@ -108,10 +108,7 @@ class ApiUserForm extends Component {
           initialValues={apiUser}
         >
           {({
-            handleBlur,
             handleSubmit,
-            handleChange,
-            values,
             touched,
             errors
           }) => (
@@ -131,14 +128,12 @@ class ApiUserForm extends Component {
                                 return (
                                   <Form.Group key={fieldIndex}>
                                     <Form.Label>{field.title}</Form.Label>
-                                    <Form.Control
+                                    <Field
+                                      as={Form.Control}
                                       disabled={!createUser}
                                       isInvalid={touched[fieldName] && !!errors[fieldName]}
                                       name={fieldName}
-                                      onBlur={handleBlur}
-                                      onChange={handleChange}
-                                      type='text'
-                                      value={values[fieldName]}
+                                      // onBlur, onChange, and value are passed automatically.
                                     />
                                     <Form.Control.Feedback type='invalid'>
                                       {errors[fieldName]}
@@ -157,8 +152,8 @@ class ApiUserForm extends Component {
 
               <div className='mt-3'>
                 <Form.Group>
-                  <Form.Check
-                    checked={values.hasConsentedToTerms}
+                  <Field
+                    as={Form.Check}
                     disabled={!createUser}
                     feedback={errors.hasConsentedToTerms}
                     isInvalid={touched.hasConsentedToTerms && !!errors.hasConsentedToTerms}
@@ -170,9 +165,7 @@ class ApiUserForm extends Component {
                       </>
                     }
                     name='hasConsentedToTerms'
-                    onBlur={handleBlur}
-                    onChange={handleChange}
-                    type='checkbox'
+                    // onBlur, onChange, and value are passed automatically.
                   />
                 </Form.Group>
               </div>