Move forwardRef outside of functions to avoid redefinitions

Signed-off-by: Taylor Smock <tsmock@meta.com>
hotosm · Apr 19, 2023 · 3398ff9 · 3398ff9
1 parent 0d23529
commit 3398ff9
Show file tree

Hide file tree

Showing 3 changed files with 16 additions and 16 deletions.
diff --git a/frontend/src/components/deleteModal/index.js b/frontend/src/components/deleteModal/index.js
@@ -10,6 +10,8 @@ import { DeleteButton } from '../teamsAndOrgs/management';
 import { Button } from '../button';
 import { AlertIcon } from '../svgIcons';
 
+const DeleteTrigger = React.forwardRef((props, ref) => <DeleteButton {...props} />);
+
 export function DeleteModal({ id, name, type, className }: Object) {
   const navigate = useNavigate();
   const token = useSelector((state) => state.auth.token);
@@ -33,8 +35,6 @@ export function DeleteModal({ id, name, type, className }: Object) {
       });
   };
 
-  const DeleteTrigger = React.forwardRef((props, ref) => <DeleteButton {...props} />);
-
   return (
     <Popup
       trigger={<DeleteTrigger className={`${className || ''} dib ml3`} />}

diff --git a/frontend/src/components/header/index.js b/frontend/src/components/header/index.js
@@ -208,6 +208,16 @@ const UserDisplay = ({ username }) => {
   );
 };
 
+const SignupTrigger = forwardRef((props, ref) => (
+  <Button className={signUpStyle} {...props}>
+    {alternativeSignUpText ? (
+      <FormattedMessage {...messages.createAccount} />
+    ) : (
+      <FormattedMessage {...messages.signUp} />
+    )}
+  </Button>
+));
+
 export const AuthButtons = ({
   logInStyle,
   signUpStyle,
@@ -220,16 +230,6 @@ export const AuthButtons = ({
     { leading: true },
   );
 
-  const SignupTrigger = forwardRef((props, ref) => (
-    <Button className={signUpStyle} {...props}>
-      {alternativeSignUpText ? (
-        <FormattedMessage {...messages.createAccount} />
-      ) : (
-        <FormattedMessage {...messages.signUp} />
-      )}
-    </Button>
-  ));
-
   return (
     <>
       <Button onClick={() => debouncedCreateLoginWindow(redirectTo)} className={`${logInStyle}`}>

diff --git a/frontend/src/components/projectEdit/actionsForm.js b/frontend/src/components/projectEdit/actionsForm.js
@@ -491,13 +491,13 @@ const TransferProject = ({ projectId, orgId }: Object) => {
   );
 };
 
+const FormattedButtonTrigger = React.forwardRef((props, ref) => (
+  <Button {...props}>{props.children}</Button>
+));
+
 export const ActionsForm = ({ projectId, projectName, orgId }: Object) => {
   const navigate = useNavigate();
 
-  const FormattedButtonTrigger = React.forwardRef((props, ref) => (
-    <Button {...props}>{props.children}</Button>
-  ));
-
   return (
     <div className="w-100">
       <div className={styleClasses.divClass}>