fix: Remove deprecated ref in Formik_v2.x.x

mitodl · Dec 27, 2024 · a269500 · a269500
1 parent 33a4e0d
commit a269500
Showing 1 changed file with 16 additions and 22 deletions.
diff --git a/static/js/components/forms/B2BPurchaseForm.js b/static/js/components/forms/B2BPurchaseForm.js
@@ -1,5 +1,5 @@
 // @flow
-import React from "react";
+import React, { useEffect } from "react";
 import * as yup from "yup";
 import { ErrorMessage, Field, Formik, Form } from "formik";
 import Decimal from "decimal.js-light";
@@ -53,24 +53,6 @@ export const validate = (values: Object) => {
 };
 
 class B2BPurchaseForm extends React.Component<Props> {
-  formikRef = React.createRef<Formik>();
-
-  componentDidMount() {
-    // on page load apply the coupon code provided in the URL query paramater
-    const formikRef = this.formikRef;
-    if (formikRef) {
-      const formikRefObj = formikRef.current;
-      if (formikRefObj && formikRefObj.state.values.coupon) {
-        this.applyCoupon(
-          formikRefObj.state.values,
-          formikRefObj.setFieldError,
-          formikRefObj.setFieldTouched,
-          null,
-        );
-      }
-    }
-  }
-
   applyCoupon = curry(
     async (
       values: Object,
@@ -271,9 +253,21 @@ class B2BPurchaseForm extends React.Component<Props> {
         }}
         validationSchema={emailValidation}
         validate={validate}
-        render={this.renderForm}
-        ref={this.formikRef}
-      />
+      >
+        {(formikProps) => {
+          useEffect(() => {
+            if (formikProps.values.coupon) {
+              this.applyCoupon(
+                formikProps.values,
+                formikProps.setFieldError,
+                formikProps.setFieldTouched,
+                null,
+              );
+            }
+          }, []);
+          return this.renderForm(formikProps);
+        }}
+      </Formik>
     );
   }
 }