diff --git a/generators/client/templates/react/src/main/webapp/app/shared/error/error-loading.tsx.ejs b/generators/client/templates/react/src/main/webapp/app/shared/error/error-loading.tsx.ejs
index f58043284fbe..0d455ebed7ee 100644
--- a/generators/client/templates/react/src/main/webapp/app/shared/error/error-loading.tsx.ejs
+++ b/generators/client/templates/react/src/main/webapp/app/shared/error/error-loading.tsx.ejs
@@ -2,14 +2,12 @@ import React from 'react';
 import { Translate } from 'react-jhipster';
 import { Alert } from 'reactstrap';
 
-class ErrorLoading extends React.Component {
-  render() {
-    return (
-      <div>
-        <Alert color="danger">Error loading component</Alert>
-      </div>
-    );
-  }
-}
+const ErrorLoading = () => {
+  return (
+    <div>
+      <Alert color="danger">Error loading component</Alert>
+    </div>
+  );
+};
 
 export default ErrorLoading as React.ComponentType<any>;
diff --git a/generators/client/templates/react/src/main/webapp/app/shared/error/page-not-found.tsx.ejs b/generators/client/templates/react/src/main/webapp/app/shared/error/page-not-found.tsx.ejs
index fff53097c2b4..b112c719ad43 100644
--- a/generators/client/templates/react/src/main/webapp/app/shared/error/page-not-found.tsx.ejs
+++ b/generators/client/templates/react/src/main/webapp/app/shared/error/page-not-found.tsx.ejs
@@ -2,18 +2,14 @@ import React from 'react';
 import { Translate } from 'react-jhipster';
 import { Alert } from 'reactstrap';
 
-class PageNotFound extends React.Component {
-  render() {
-    return (
-      <div>
-        <Alert color="danger">
-          <Translate contentKey="error.http.404">
-            The page does not exist.
-          </Translate>
-        </Alert>
-      </div>
-    );
-  }
-}
+const PageNotFound = () => {
+  return (
+    <div>
+      <Alert color="danger">
+        <Translate contentKey="error.http.404">The page does not exist.</Translate>
+      </Alert>
+    </div>
+  );
+};
 
 export default PageNotFound;
diff --git a/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs b/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs
index 0744a9d0cd9b..41040ab204ea 100644
--- a/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs
+++ b/generators/client/templates/react/src/main/webapp/app/shared/layout/menus/menu-item.tsx.ejs
@@ -23,22 +23,22 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 
 export interface IMenuItem {
+  children: React.ReactNode;
   icon: IconProp;
   to: string;
   id?: string;
-  "data-cy"?: string;
-  children?: React.ReactNode
+  'data-cy'?: string;
 }
 
-export default class MenuItem extends React.Component<IMenuItem> {
+const MenuItem = (props: IMenuItem) => {
+  const { to, icon, id, children } = props;
 
-  render() {
-    const { to, icon, id, children } = this.props;
+  return (
+    <DropdownItem tag={Link} to={to} id={id} data-cy={props['data-cy']}>
+      <FontAwesomeIcon icon={icon} fixedWidth /> {children}
+    </DropdownItem>
+  );
+};
+
+export default MenuItem;
 
-    return (
-      <DropdownItem tag={Link} to={to} id={id} data-cy={this.props["data-cy"]} >
-        <FontAwesomeIcon icon={icon} fixedWidth /> {children}
-      </DropdownItem>
-    );
-  }
-}