From e7fead0f2c0945470752302daa60ba16628a6aaf Mon Sep 17 00:00:00 2001
From: Keith Grant <keithjgrant@redhat.com>
Date: Thu, 16 Jan 2020 16:46:13 -0800
Subject: [PATCH] update Formik formatting to remove warnings

---
 .../CodeMirrorInput/VariablesField.jsx        |  7 +-
 .../CodeMirrorInput/VariablesField.test.jsx   | 30 +++-----
 .../components/FormField/CheckboxField.jsx    |  8 +-
 .../components/FormField/PasswordField.jsx    |  8 +-
 .../FormField/PasswordField.test.jsx          | 10 ++-
 .../src/screens/Host/shared/HostForm.jsx      | 11 +--
 .../Inventory/shared/InventoryForm.jsx        | 20 +++--
 .../Inventory/shared/InventoryGroupForm.jsx   |  8 +-
 .../Inventory/shared/InventoryHostForm.jsx    |  5 +-
 .../Organization/shared/OrganizationForm.jsx  | 12 +--
 .../screens/Project/shared/ProjectForm.jsx    | 22 +++---
 .../ProjectSubForms/InsightsSubForm.jsx       |  5 +-
 .../shared/ProjectSubForms/ManualSubForm.jsx  |  5 +-
 .../shared/ProjectSubForms/SharedFields.jsx   |  7 +-
 .../src/screens/Team/shared/TeamForm.jsx      | 10 ++-
 .../Template/shared/JobTemplateForm.jsx       | 74 +++++++++----------
 .../src/screens/User/shared/UserForm.jsx      | 17 +++--
 17 files changed, 126 insertions(+), 133 deletions(-)

diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
index 97c35c1871..44b9e0d45d 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.jsx
@@ -13,9 +13,8 @@ function VariablesField({ id, name, label, readOnly }) {
   const [mode, setMode] = useState(YAML_MODE);
 
   return (
-    <Field
-      name={name}
-      render={({ field, form }) => (
+    <Field name={name}>
+      {({ field, form }) => (
         <div className="pf-c-form__group">
           <Split gutter="sm">
             <SplitItem>
@@ -60,7 +59,7 @@ function VariablesField({ id, name, label, readOnly }) {
           ) : null}
         </div>
       )}
-    />
+    </Field>
   );
 }
 VariablesField.propTypes = {
diff --git a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
index 675212c023..dc21b91dae 100644
--- a/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
+++ b/awx/ui_next/src/components/CodeMirrorInput/VariablesField.test.jsx
@@ -2,7 +2,6 @@ import React from 'react';
 import { act } from 'react-dom/test-utils';
 import { mount } from 'enzyme';
 import { Formik } from 'formik';
-import { sleep } from '../../../testUtils/testUtils';
 import VariablesField from './VariablesField';
 
 describe('VariablesField', () => {
@@ -13,12 +12,11 @@ describe('VariablesField', () => {
   it('should render code mirror input', () => {
     const value = '---\n';
     const wrapper = mount(
-      <Formik
-        initialValues={{ variables: value }}
-        render={() => (
+      <Formik initialValues={{ variables: value }}>
+        {() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
         )}
-      />
+      </Formik>
     );
     const codemirror = wrapper.find('Controlled');
     expect(codemirror.prop('value')).toEqual(value);
@@ -27,12 +25,11 @@ describe('VariablesField', () => {
   it('should render yaml/json toggles', async () => {
     const value = '---\n';
     const wrapper = mount(
-      <Formik
-        initialValues={{ variables: value }}
-        render={() => (
+      <Formik initialValues={{ variables: value }}>
+        {() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
         )}
-      />
+      </Formik>
     );
     const buttons = wrapper.find('Button');
     expect(buttons).toHaveLength(2);
@@ -56,12 +53,11 @@ describe('VariablesField', () => {
   it('should set Formik error if yaml is invalid', async () => {
     const value = '---\nfoo bar\n';
     const wrapper = mount(
-      <Formik
-        initialValues={{ variables: value }}
-        render={() => (
+      <Formik initialValues={{ variables: value }}>
+        {() => (
           <VariablesField id="the-field" name="variables" label="Variables" />
         )}
-      />
+      </Formik>
     );
     wrapper
       .find('Button')
@@ -78,10 +74,8 @@ describe('VariablesField', () => {
     const value = '---\nfoo: bar\n';
     const handleSubmit = jest.fn();
     const wrapper = mount(
-      <Formik
-        initialValues={{ variables: value }}
-        onSubmit={handleSubmit}
-        render={formik => (
+      <Formik initialValues={{ variables: value }} onSubmit={handleSubmit}>
+        {formik => (
           <form onSubmit={formik.handleSubmit}>
             <VariablesField id="the-field" name="variables" label="Variables" />
             <button type="submit" id="submit">
@@ -89,7 +83,7 @@ describe('VariablesField', () => {
             </button>
           </form>
         )}
-      />
+      </Formik>
     );
     await act(async () => {
       wrapper.find('CodeMirrorInput').invoke('onChange')(
diff --git a/awx/ui_next/src/components/FormField/CheckboxField.jsx b/awx/ui_next/src/components/FormField/CheckboxField.jsx
index 185a40347f..9e854d803a 100644
--- a/awx/ui_next/src/components/FormField/CheckboxField.jsx
+++ b/awx/ui_next/src/components/FormField/CheckboxField.jsx
@@ -11,10 +11,8 @@ const QuestionCircleIcon = styled(PFQuestionCircleIcon)`
 
 function CheckboxField({ id, name, label, tooltip, validate, ...rest }) {
   return (
-    <Field
-      name={name}
-      validate={validate}
-      render={({ field }) => (
+    <Field name={name} validate={validate}>
+      {({ field }) => (
         <Checkbox
           aria-label={label}
           label={
@@ -37,7 +35,7 @@ function CheckboxField({ id, name, label, tooltip, validate, ...rest }) {
           }}
         />
       )}
-    />
+    </Field>
   );
 }
 CheckboxField.propTypes = {
diff --git a/awx/ui_next/src/components/FormField/PasswordField.jsx b/awx/ui_next/src/components/FormField/PasswordField.jsx
index 5ea33884ad..6e81590bfb 100644
--- a/awx/ui_next/src/components/FormField/PasswordField.jsx
+++ b/awx/ui_next/src/components/FormField/PasswordField.jsx
@@ -22,10 +22,8 @@ function PasswordField(props) {
   };
 
   return (
-    <Field
-      name={name}
-      validate={validate}
-      render={({ field, form }) => {
+    <Field name={name} validate={validate}>
+      {({ field, form }) => {
         const isValid =
           form && (!form.touched[field.name] || !form.errors[field.name]);
         return (
@@ -65,7 +63,7 @@ function PasswordField(props) {
           </FormGroup>
         );
       }}
-    />
+    </Field>
   );
 }
 
diff --git a/awx/ui_next/src/components/FormField/PasswordField.test.jsx b/awx/ui_next/src/components/FormField/PasswordField.test.jsx
index 5fb2ec434a..65fdd55501 100644
--- a/awx/ui_next/src/components/FormField/PasswordField.test.jsx
+++ b/awx/ui_next/src/components/FormField/PasswordField.test.jsx
@@ -11,10 +11,11 @@ describe('PasswordField', () => {
         initialValues={{
           password: '',
         }}
-        render={() => (
+      >
+        {() => (
           <PasswordField id="test-password" name="password" label="Password" />
         )}
-      />
+      </Formik>
     );
     expect(wrapper).toHaveLength(1);
   });
@@ -25,10 +26,11 @@ describe('PasswordField', () => {
         initialValues={{
           password: '',
         }}
-        render={() => (
+      >
+        {() => (
           <PasswordField id="test-password" name="password" label="Password" />
         )}
-      />
+      </Formik>
     );
     expect(wrapper.find('input').prop('type')).toBe('password');
     expect(wrapper.find('EyeSlashIcon').length).toBe(1);
diff --git a/awx/ui_next/src/screens/Host/shared/HostForm.jsx b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
index 837f1edc7e..b9eb44d61b 100644
--- a/awx/ui_next/src/screens/Host/shared/HostForm.jsx
+++ b/awx/ui_next/src/screens/Host/shared/HostForm.jsx
@@ -19,7 +19,6 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
   const [inventory, setInventory] = useState(
     host ? host.summary_fields.inventory : ''
   );
-  console.log('render');
 
   return (
     <Formik
@@ -30,7 +29,8 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
         variables: host.variables,
       }}
       onSubmit={handleSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
@@ -54,7 +54,8 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
                   i18n._(t`Select a value for this field`),
                   i18n
                 )}
-                render={({ form }) => (
+              >
+                {({ form }) => (
                   <InventoryLookup
                     value={inventory}
                     onBlur={() => form.setFieldTouched('inventory')}
@@ -72,7 +73,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
                     error={form.errors.inventory}
                   />
                 )}
-              />
+              </Field>
             )}
           </FormRow>
           <FormRow>
@@ -88,7 +89,7 @@ function HostForm({ handleSubmit, handleCancel, host, i18n }) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
index d2e858484f..79dd3023bf 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventoryForm.jsx
@@ -41,7 +41,8 @@ function InventoryForm({
       onSubmit={values => {
         onSubmit(values);
       }}
-      render={formik => (
+    >
+      {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
@@ -66,7 +67,8 @@ function InventoryForm({
                 i18n._(t`Select a value for this field`),
                 i18n
               )}
-              render={({ form, field }) => (
+            >
+              {({ form, field }) => (
                 <OrganizationLookup
                   helperTextInvalid={form.errors.organization}
                   isValid={
@@ -82,12 +84,13 @@ function InventoryForm({
                   required
                 />
               )}
-            />
+            </Field>
             <Field
               id="inventory-insights_credential"
               label={i18n._(t`Insights Credential`)}
               name="insights_credential"
-              render={({ field, form }) => (
+            >
+              {({ field, form }) => (
                 <CredentialLookup
                   label={i18n._(t`Insights Credential`)}
                   credentialTypeId={credentialTypeId}
@@ -97,14 +100,15 @@ function InventoryForm({
                   value={field.value}
                 />
               )}
-            />
+            </Field>
           </FormRow>
           <FormRow>
             <Field
               id="inventory-instanceGroups"
               label={i18n._(t`Instance Groups`)}
               name="instanceGroups"
-              render={({ field, form }) => (
+            >
+              {({ field, form }) => (
                 <InstanceGroupsLookup
                   value={field.value}
                   onChange={value => {
@@ -112,7 +116,7 @@ function InventoryForm({
                   }}
                 />
               )}
-            />
+            </Field>
           </FormRow>
           <FormRow>
             <VariablesField
@@ -132,7 +136,7 @@ function InventoryForm({
           </FormRow>
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
index ec138d3b12..e1ae21f64d 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventoryGroupForm.jsx
@@ -28,10 +28,8 @@ function InventoryGroupForm({
   return (
     <Card className="awx-c-card">
       <CardBody>
-        <Formik
-          initialValues={initialValues}
-          onSubmit={handleSubmit}
-          render={formik => (
+        <Formik initialValues={initialValues} onSubmit={handleSubmit}>
+          {formik => (
             <Form autoComplete="off" onSubmit={formik.handleSubmit}>
               <FormRow css="grid-template-columns: repeat(auto-fit, minmax(300px, 500px));">
                 <FormField
@@ -63,7 +61,7 @@ function InventoryGroupForm({
               {error ? <div>error</div> : null}
             </Form>
           )}
-        />
+        </Formik>
       </CardBody>
     </Card>
   );
diff --git a/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx b/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx
index 23965bdc8b..f51e2abee9 100644
--- a/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx
+++ b/awx/ui_next/src/screens/Inventory/shared/InventoryHostForm.jsx
@@ -19,7 +19,8 @@ function InventoryHostForm({ handleSubmit, handleCancel, host, i18n }) {
         variables: host.variables,
       }}
       onSubmit={handleSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
@@ -52,7 +53,7 @@ function InventoryHostForm({ handleSubmit, handleCancel, host, i18n }) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
index fea386879f..2d1cc69347 100644
--- a/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
+++ b/awx/ui_next/src/screens/Organization/shared/OrganizationForm.jsx
@@ -91,7 +91,8 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
         max_hosts: organization.max_hosts || '0',
       }}
       onSubmit={handleSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form autoComplete="off" onSubmit={formik.handleSubmit}>
           <FormRow>
             <FormField
@@ -132,9 +133,8 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
               isDisabled={!me.is_superuser}
             />
             {custom_virtualenvs && custom_virtualenvs.length > 1 && (
-              <Field
-                name="custom_virtualenv"
-                render={({ field }) => (
+              <Field name="custom_virtualenv">
+                {({ field }) => (
                   <FormGroup
                     fieldId="org-custom-virtualenv"
                     label={i18n._(t`Ansible Environment`)}
@@ -151,7 +151,7 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
                     />
                   </FormGroup>
                 )}
-              />
+              </Field>
             )}
           </FormRow>
           <InstanceGroupsLookup
@@ -167,7 +167,7 @@ function OrganizationForm({ organization, i18n, me, onCancel, onSubmit }) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
index 2d41ead48f..ae72bd0896 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
+++ b/awx/ui_next/src/screens/Project/shared/ProjectForm.jsx
@@ -201,7 +201,8 @@ function ProjectForm({ project, ...props }) {
             scm_url: project.scm_url || '',
           }}
           onSubmit={handleSubmit}
-          render={formik => (
+        >
+          {formik => (
             <Form
               autoComplete="off"
               onSubmit={formik.handleSubmit}
@@ -228,7 +229,8 @@ function ProjectForm({ project, ...props }) {
                     i18n._(t`Select a value for this field`),
                     i18n
                   )}
-                  render={({ form }) => (
+                >
+                  {({ form }) => (
                     <OrganizationLookup
                       helperTextInvalid={form.errors.organization}
                       isValid={
@@ -243,14 +245,15 @@ function ProjectForm({ project, ...props }) {
                       required
                     />
                   )}
-                />
+                </Field>
                 <Field
                   name="scm_type"
                   validate={required(
                     i18n._(t`Select a value for this field`),
                     i18n
                   )}
-                  render={({ field, form }) => (
+                >
+                  {({ field, form }) => (
                     <FormGroup
                       fieldId="project-scm-type"
                       helperTextInvalid={form.errors.scm_type}
@@ -286,7 +289,7 @@ function ProjectForm({ project, ...props }) {
                       />
                     </FormGroup>
                   )}
-                />
+                </Field>
                 {formik.values.scm_type !== '' && (
                   <ScmTypeFormRow>
                     <SubFormTitle size="md">
@@ -345,9 +348,8 @@ function ProjectForm({ project, ...props }) {
                   {({ custom_virtualenvs }) =>
                     custom_virtualenvs &&
                     custom_virtualenvs.length > 1 && (
-                      <Field
-                        name="custom_virtualenv"
-                        render={({ field }) => (
+                      <Field name="custom_virtualenv">
+                        {({ field }) => (
                           <FormGroup
                             fieldId="project-custom-virtualenv"
                             label={i18n._(t`Ansible Environment`)}
@@ -378,7 +380,7 @@ function ProjectForm({ project, ...props }) {
                             />
                           </FormGroup>
                         )}
-                      />
+                      </Field>
                     )
                   }
                 </Config>
@@ -389,7 +391,7 @@ function ProjectForm({ project, ...props }) {
               />
             </Form>
           )}
-        />
+        </Formik>
       )}
     </Config>
   );
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectSubForms/InsightsSubForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectSubForms/InsightsSubForm.jsx
index d0193076ff..503fbf4cf4 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectSubForms/InsightsSubForm.jsx
+++ b/awx/ui_next/src/screens/Project/shared/ProjectSubForms/InsightsSubForm.jsx
@@ -16,7 +16,8 @@ const InsightsSubForm = ({
     <Field
       name="credential"
       validate={required(i18n._(t`Select a value for this field`), i18n)}
-      render={({ form }) => (
+    >
+      {({ form }) => (
         <CredentialLookup
           credentialTypeId={credential.typeId}
           label={i18n._(t`Insights Credential`)}
@@ -31,7 +32,7 @@ const InsightsSubForm = ({
           required
         />
       )}
-    />
+    </Field>
     <ScmTypeOptions hideAllowOverride scmUpdateOnLaunch={scmUpdateOnLaunch} />
   </>
 );
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx b/awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx
index f8caaedf5d..94a624b380 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx
+++ b/awx/ui_next/src/screens/Project/shared/ProjectSubForms/ManualSubForm.jsx
@@ -76,7 +76,8 @@ const ManualSubForm = ({
         <Field
           name="local_path"
           validate={required(i18n._(t`Select a value for this field`), i18n)}
-          render={({ field, form }) => (
+        >
+          {({ field, form }) => (
             <FormGroup
               fieldId="project-local-path"
               helperTextInvalid={form.errors.local_path}
@@ -99,7 +100,7 @@ const ManualSubForm = ({
               />
             </FormGroup>
           )}
-        />
+        </Field>
       )}
     </>
   );
diff --git a/awx/ui_next/src/screens/Project/shared/ProjectSubForms/SharedFields.jsx b/awx/ui_next/src/screens/Project/shared/ProjectSubForms/SharedFields.jsx
index 5a7e1434c1..1268cd7230 100644
--- a/awx/ui_next/src/screens/Project/shared/ProjectSubForms/SharedFields.jsx
+++ b/awx/ui_next/src/screens/Project/shared/ProjectSubForms/SharedFields.jsx
@@ -42,9 +42,8 @@ export const BranchFormField = withI18n()(({ i18n, label }) => (
 
 export const ScmCredentialFormField = withI18n()(
   ({ i18n, credential, onCredentialSelection }) => (
-    <Field
-      name="credential"
-      render={({ form }) => (
+    <Field name="credential">
+      {({ form }) => (
         <CredentialLookup
           credentialTypeId={credential.typeId}
           label={i18n._(t`SCM Credential`)}
@@ -55,7 +54,7 @@ export const ScmCredentialFormField = withI18n()(
           }}
         />
       )}
-    />
+    </Field>
   )
 );
 
diff --git a/awx/ui_next/src/screens/Team/shared/TeamForm.jsx b/awx/ui_next/src/screens/Team/shared/TeamForm.jsx
index 65a3a12cbd..e3414950f2 100644
--- a/awx/ui_next/src/screens/Team/shared/TeamForm.jsx
+++ b/awx/ui_next/src/screens/Team/shared/TeamForm.jsx
@@ -24,7 +24,8 @@ function TeamForm(props) {
         organization: team.organization || '',
       }}
       onSubmit={handleSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form
           autoComplete="off"
           onSubmit={formik.handleSubmit}
@@ -51,7 +52,8 @@ function TeamForm(props) {
                 i18n._(t`Select a value for this field`),
                 i18n
               )}
-              render={({ form }) => (
+            >
+              {({ form }) => (
                 <OrganizationLookup
                   helperTextInvalid={form.errors.organization}
                   isValid={
@@ -66,7 +68,7 @@ function TeamForm(props) {
                   required
                 />
               )}
-            />
+            </Field>
           </FormRow>
           <FormActionGroup
             onCancel={handleCancel}
@@ -74,7 +76,7 @@ function TeamForm(props) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }
 
diff --git a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
index 1b2b25df11..b62f7603ec 100644
--- a/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
+++ b/awx/ui_next/src/screens/Template/shared/JobTemplateForm.jsx
@@ -146,7 +146,6 @@ class JobTemplateForm extends Component {
       setFieldValue,
       i18n,
       template,
-      values,
     } = this.props;
     const jobTypeOptions = [
       {
@@ -206,7 +205,8 @@ class JobTemplateForm extends Component {
             name="job_type"
             validate={required(null, i18n)}
             onBlur={handleBlur}
-            render={({ form, field }) => {
+          >
+            {({ form, field }) => {
               const isValid = !form.touched.job_type || !form.errors.job_type;
               return (
                 <FormGroup
@@ -231,11 +231,12 @@ class JobTemplateForm extends Component {
                 </FormGroup>
               );
             }}
-          />
+          </Field>
           <Field
             name="inventory"
             validate={required(i18n._(t`Select a value for this field`), i18n)}
-            render={({ form }) => (
+          >
+            {({ form }) => (
               <InventoryLookup
                 value={inventory}
                 onBlur={() => form.setFieldTouched('inventory')}
@@ -253,11 +254,9 @@ class JobTemplateForm extends Component {
                 error={form.errors.inventory}
               />
             )}
-          />
-          <Field
-            name="project"
-            validate={this.handleProjectValidation()}
-            render={({ form }) => (
+          </Field>
+          <Field name="project" validate={this.handleProjectValidation()}>
+            {({ form }) => (
               <ProjectLookup
                 value={project}
                 onBlur={() => form.setFieldTouched('project')}
@@ -269,12 +268,13 @@ class JobTemplateForm extends Component {
                 required
               />
             )}
-          />
+          </Field>
           <Field
             name="playbook"
             validate={required(i18n._(t`Select a value for this field`), i18n)}
             onBlur={handleBlur}
-            render={({ field, form }) => {
+          >
+            {({ field, form }) => {
               const isValid = !form.touched.playbook || !form.errors.playbook;
               return (
                 <FormGroup
@@ -300,12 +300,11 @@ class JobTemplateForm extends Component {
                 </FormGroup>
               );
             }}
-          />
+          </Field>
         </FormRow>
         <FormRow>
-          <Field
-            name="labels"
-            render={({ field }) => (
+          <Field name="labels">
+            {({ field }) => (
               <FormGroup label={i18n._(t`Labels`)} fieldId="template-labels">
                 <FieldTooltip
                   content={i18n._(t`Optional labels that describe this job template,
@@ -319,13 +318,11 @@ class JobTemplateForm extends Component {
                 />
               </FormGroup>
             )}
-          />
+          </Field>
         </FormRow>
         <FormRow>
-          <Field
-            name="credentials"
-            fieldId="template-credentials"
-            render={({ field }) => (
+          <Field name="credentials" fieldId="template-credentials">
+            {({ field }) => (
               <MultiCredentialsLookup
                 value={field.value}
                 onChange={newCredentials =>
@@ -337,7 +334,7 @@ class JobTemplateForm extends Component {
                 )}
               />
             )}
-          />
+          </Field>
         </FormRow>
         <AdvancedFieldsWrapper label="Advanced">
           <FormRow>
@@ -370,9 +367,8 @@ class JobTemplateForm extends Component {
                   playbook. Multiple patterns are allowed. Refer to Ansible
                   documentation for more information and examples on patterns.`)}
             />
-            <Field
-              name="verbosity"
-              render={({ field }) => (
+            <Field name="verbosity">
+              {({ field }) => (
                 <FormGroup
                   fieldId="template-verbosity"
                   label={i18n._(t`Verbosity`)}
@@ -388,7 +384,7 @@ class JobTemplateForm extends Component {
                   />
                 </FormGroup>
               )}
-            />
+            </Field>
             <FormField
               id="template-job-slicing"
               name="job_slice_count"
@@ -409,9 +405,8 @@ class JobTemplateForm extends Component {
                 before the task is canceled. Defaults to 0 for no job
                 timeout.`)}
             />
-            <Field
-              name="diff_mode"
-              render={({ field, form }) => (
+            <Field name="diff_mode">
+              {({ field, form }) => (
                 <FormGroup
                   fieldId="template-show-changes"
                   label={i18n._(t`Show Changes`)}
@@ -433,11 +428,10 @@ class JobTemplateForm extends Component {
                   </div>
                 </FormGroup>
               )}
-            />
+            </Field>
           </FormRow>
-          <Field
-            name="instanceGroups"
-            render={({ field, form }) => (
+          <Field name="instanceGroups">
+            {({ field, form }) => (
               <InstanceGroupsLookup
                 css="margin-top: 20px"
                 value={field.value}
@@ -446,10 +440,9 @@ class JobTemplateForm extends Component {
                   to run on.`)}
               />
             )}
-          />
-          <Field
-            name="job_tags"
-            render={({ field, form }) => (
+          </Field>
+          <Field name="job_tags">
+            {({ field, form }) => (
               <FormGroup
                 label={i18n._(t`Job Tags`)}
                 css="margin-top: 20px"
@@ -468,10 +461,9 @@ class JobTemplateForm extends Component {
                 />
               </FormGroup>
             )}
-          />
-          <Field
-            name="skip_tags"
-            render={({ field, form }) => (
+          </Field>
+          <Field name="skip_tags">
+            {({ field, form }) => (
               <FormGroup
                 label={i18n._(t`Skip Tags`)}
                 css="margin-top: 20px"
@@ -490,7 +482,7 @@ class JobTemplateForm extends Component {
                 />
               </FormGroup>
             )}
-          />
+          </Field>
           <GridFormGroup
             fieldId="template-option-checkboxes"
             isInline
diff --git a/awx/ui_next/src/screens/User/shared/UserForm.jsx b/awx/ui_next/src/screens/User/shared/UserForm.jsx
index c4fa6131f9..6620049c45 100644
--- a/awx/ui_next/src/screens/User/shared/UserForm.jsx
+++ b/awx/ui_next/src/screens/User/shared/UserForm.jsx
@@ -76,7 +76,8 @@ function UserForm(props) {
         user_type: userType,
       }}
       onSubmit={handleValidateAndSubmit}
-      render={formik => (
+    >
+      {formik => (
         <Form
           autoComplete="off"
           onSubmit={formik.handleSubmit}
@@ -141,7 +142,8 @@ function UserForm(props) {
                   i18n._(t`Select a value for this field`),
                   i18n
                 )}
-                render={({ form }) => (
+              >
+                {({ form }) => (
                   <OrganizationLookup
                     helperTextInvalid={form.errors.organization}
                     isValid={
@@ -156,11 +158,10 @@ function UserForm(props) {
                     required
                   />
                 )}
-              />
+              </Field>
             )}
-            <Field
-              name="user_type"
-              render={({ form, field }) => {
+            <Field name="user_type">
+              {({ form, field }) => {
                 const isValid =
                   !form.touched.user_type || !form.errors.user_type;
                 return (
@@ -180,7 +181,7 @@ function UserForm(props) {
                   </FormGroup>
                 );
               }}
-            />
+            </Field>
           </FormRow>
           <FormActionGroup
             onCancel={handleCancel}
@@ -188,7 +189,7 @@ function UserForm(props) {
           />
         </Form>
       )}
-    />
+    </Formik>
   );
 }