more

src/Components/Modals/PaymentModal.js

@@ -20,38 +20,6 @@ const PaymentModal = ({
 }) => {
   const fieldsChunkSize = 2;
 
-  const ModalForm = () => {
-    return splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
-      (names, j) => (
-        <Row key={`row${j}-modal`}>
-          {names.map((name, i) => (
-            <Col
-              key={`${name}${i + fieldsChunkSize * j}-modal`}
-              className="mb-3"
-            >
-              <TextInput
-                key={`${name}-modal-input`}
-                name={name}
-                value={paymentData[name].value}
-                onChange={(e) => handleChangePaymentInput(e, name)}
-                error={paymentData[name].error}
-                message={paymentData[name].message}
-                label={
-                  paymentData[name].value.length === 0
-                    ? paymentfields[name].label
-                    : ""
-                }
-                type={paymentfields[name].type}
-                values={paymentfields[name].values}
-                disabled={isBusy}
-              />
-            </Col>
-          ))}
-        </Row>
-      )
-    );
-  };
-
   return (
     <Modal show="true" size="lg">
       <Modal.Header closeButton>
@@ -60,7 +28,35 @@ const PaymentModal = ({
       <Modal.Body>
         <div className="payment-modal-text-wrapper">{modalText}</div>
         <Form className="payment-form">
-          <ModalForm />
+          {splitEvery(Object.keys(paymentfields), fieldsChunkSize).map(
+            (names, j) => (
+              <Row key={`row${j}-modal`}>
+                {names.map((name, i) => (
+                  <Col
+                    key={`${name}${i + fieldsChunkSize * j}-modal`}
+                    className="mb-3"
+                  >
+                    <TextInput
+                      key={`${name}-modal-input`}
+                      name={name}
+                      value={paymentData[name].value}
+                      onChange={(e) => handleChangePaymentInput(e, name)}
+                      error={paymentData[name].error}
+                      message={paymentData[name].message}
+                      label={
+                        paymentData[name].value.length === 0
+                          ? paymentfields[name].label
+                          : ""
+                      }
+                      type={paymentfields[name].type}
+                      values={paymentfields[name].values}
+                      disabled={isBusy}
+                    />
+                  </Col>
+                ))}
+              </Row>
+            )
+          )}
         </Form>
       </Modal.Body>
       <Modal.Footer>