diff --git a/client/src/components/formHelpers/__snapshots__/BlockSaveButton.test.js.snap b/client/src/components/formHelpers/__snapshots__/block-save-button.test.tsx.snap
similarity index 100%
rename from client/src/components/formHelpers/__snapshots__/BlockSaveButton.test.js.snap
rename to client/src/components/formHelpers/__snapshots__/block-save-button.test.tsx.snap
diff --git a/client/src/components/formHelpers/__snapshots__/BlockSaveWrapper.test.js.snap b/client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap
similarity index 100%
rename from client/src/components/formHelpers/__snapshots__/BlockSaveWrapper.test.js.snap
rename to client/src/components/formHelpers/__snapshots__/block-save-wrapper.test.tsx.snap
diff --git a/client/src/components/formHelpers/BlockSaveButton.test.js b/client/src/components/formHelpers/block-save-button.test.tsx
similarity index 92%
rename from client/src/components/formHelpers/BlockSaveButton.test.js
rename to client/src/components/formHelpers/block-save-button.test.tsx
index 8e17095cb7..6f891e22f6 100644
--- a/client/src/components/formHelpers/BlockSaveButton.test.js
+++ b/client/src/components/formHelpers/block-save-button.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import BlockSaveButton from './BlockSaveButton';
+import BlockSaveButton from './block-save-button';
 
 test('<BlockSaveButton /> snapshot', () => {
   const { container } = render(<BlockSaveButton />);
diff --git a/client/src/components/formHelpers/BlockSaveButton.js b/client/src/components/formHelpers/block-save-button.tsx
similarity index 66%
rename from client/src/components/formHelpers/BlockSaveButton.js
rename to client/src/components/formHelpers/block-save-button.tsx
index 1b3785a368..86a2c622cc 100644
--- a/client/src/components/formHelpers/BlockSaveButton.js
+++ b/client/src/components/formHelpers/block-save-button.tsx
@@ -1,20 +1,16 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-function BlockSaveButton(props) {
+function BlockSaveButton(props?: Record<string, unknown>): JSX.Element {
   const { t } = useTranslation();
   return (
     <Button block={true} bsStyle='primary' {...props} type='submit'>
-      {props.children || t('buttons.save')}
+      {props?.children || t('buttons.save')}
     </Button>
   );
 }
 
 BlockSaveButton.displayName = 'BlockSaveButton';
-BlockSaveButton.propTypes = {
-  children: PropTypes.any
-};
 
 export default BlockSaveButton;
diff --git a/client/src/components/formHelpers/BlockSaveWrapper.test.js b/client/src/components/formHelpers/block-save-wrapper.test.tsx
similarity index 80%
rename from client/src/components/formHelpers/BlockSaveWrapper.test.js
rename to client/src/components/formHelpers/block-save-wrapper.test.tsx
index 5091ac325a..93cd59dce5 100644
--- a/client/src/components/formHelpers/BlockSaveWrapper.test.js
+++ b/client/src/components/formHelpers/block-save-wrapper.test.tsx
@@ -1,7 +1,7 @@
 import React from 'react';
 import { render } from '@testing-library/react';
 
-import BlockSaveWrapper from './BlockSaveWrapper';
+import BlockSaveWrapper from './block-save-wrapper';
 
 test('<BlockSaveWrapper /> snapshot', () => {
   const { container } = render(<BlockSaveWrapper />);
diff --git a/client/src/components/formHelpers/BlockSaveWrapper.js b/client/src/components/formHelpers/block-save-wrapper.tsx
similarity index 54%
rename from client/src/components/formHelpers/BlockSaveWrapper.js
rename to client/src/components/formHelpers/block-save-wrapper.tsx
index 9e977789b6..2f5776997c 100644
--- a/client/src/components/formHelpers/BlockSaveWrapper.js
+++ b/client/src/components/formHelpers/block-save-wrapper.tsx
@@ -1,19 +1,17 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  children: PropTypes.node
-};
 
 const style = {
   padding: '0 15px'
 };
 
-function BlockSaveWrapper({ children }) {
+function BlockSaveWrapper({
+  children
+}: {
+  children?: React.ReactElement;
+}): JSX.Element {
   return <div style={style}>{children}</div>;
 }
 
 BlockSaveWrapper.displayName = 'BlockSaveWrapper';
-BlockSaveWrapper.propTypes = propTypes;
 
 export default BlockSaveWrapper;
diff --git a/client/src/components/formHelpers/index.js b/client/src/components/formHelpers/index.js
index 40daf0da60..3e692a3e6e 100644
--- a/client/src/components/formHelpers/index.js
+++ b/client/src/components/formHelpers/index.js
@@ -7,8 +7,8 @@ import {
   httpValidator
 } from './FormValidators';
 
-export { default as BlockSaveButton } from './BlockSaveButton.js';
-export { default as BlockSaveWrapper } from './BlockSaveWrapper.js';
+export { default as BlockSaveButton } from './block-save-button';
+export { default as BlockSaveWrapper } from './block-save-wrapper';
 export { default as Form } from './Form.js';
 export { default as FormFields } from './FormFields.js';
 
diff --git a/client/src/components/helpers/form/BlockSaveButton.js b/client/src/components/helpers/form/block-save-button.tsx
similarity index 74%
rename from client/src/components/helpers/form/BlockSaveButton.js
rename to client/src/components/helpers/form/block-save-button.tsx
index a605b18c95..7726171639 100644
--- a/client/src/components/helpers/form/BlockSaveButton.js
+++ b/client/src/components/helpers/form/block-save-button.tsx
@@ -1,9 +1,13 @@
 import React from 'react';
-import PropTypes from 'prop-types';
 import { Button } from '@freecodecamp/react-bootstrap';
 import { useTranslation } from 'react-i18next';
 
-function BlockSaveButton({ children, ...restProps }) {
+function BlockSaveButton({
+  children,
+  ...restProps
+}: {
+  children?: React.ReactNode;
+}): JSX.Element {
   const { t } = useTranslation();
 
   return (
@@ -20,8 +24,5 @@ function BlockSaveButton({ children, ...restProps }) {
 }
 
 BlockSaveButton.displayName = 'BlockSaveButton';
-BlockSaveButton.propTypes = {
-  children: PropTypes.any
-};
 
 export default BlockSaveButton;
diff --git a/client/src/components/helpers/form/BlockSaveWrapper.js b/client/src/components/helpers/form/block-save-wrapper.tsx
similarity index 56%
rename from client/src/components/helpers/form/BlockSaveWrapper.js
rename to client/src/components/helpers/form/block-save-wrapper.tsx
index 2fcb127b00..8cef7fb5b6 100644
--- a/client/src/components/helpers/form/BlockSaveWrapper.js
+++ b/client/src/components/helpers/form/block-save-wrapper.tsx
@@ -1,15 +1,15 @@
 import React from 'react';
-import PropTypes from 'prop-types';
-
-const propTypes = {
-  children: PropTypes.node
-};
 
 const style = {
   padding: '0 15px'
 };
 
-function BlockSaveWrapper({ children, ...restProps }) {
+function BlockSaveWrapper({
+  children,
+  ...restProps
+}: {
+  children?: React.ReactNode;
+}): JSX.Element {
   return (
     <div style={style} {...restProps}>
       {children}
@@ -18,6 +18,5 @@ function BlockSaveWrapper({ children, ...restProps }) {
 }
 
 BlockSaveWrapper.displayName = 'BlockSaveWrapper';
-BlockSaveWrapper.propTypes = propTypes;
 
 export default BlockSaveWrapper;
diff --git a/client/src/components/settings/About.js b/client/src/components/settings/About.js
index 3e058ed3b8..189221cc4a 100644
--- a/client/src/components/settings/About.js
+++ b/client/src/components/settings/About.js
@@ -11,7 +11,7 @@ import {
 import { FullWidthRow, Spacer } from '../helpers';
 import ThemeSettings from './Theme';
 import UsernameSettings from './Username';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import { withTranslation } from 'react-i18next';
 
 const propTypes = {
diff --git a/client/src/components/settings/Email.js b/client/src/components/settings/Email.js
index 137e153d11..9f69eddebd 100644
--- a/client/src/components/settings/Email.js
+++ b/client/src/components/settings/Email.js
@@ -20,7 +20,7 @@ import { maybeEmailRE } from '../../utils';
 import FullWidthRow from '../helpers/full-width-row';
 import Spacer from '../helpers/spacer';
 import SectionHeader from './SectionHeader';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import ToggleSetting from './ToggleSetting';
 
 const mapStateToProps = () => ({});
diff --git a/client/src/components/settings/Internet.js b/client/src/components/settings/Internet.js
index 60ad599639..9ab97a1fe5 100644
--- a/client/src/components/settings/Internet.js
+++ b/client/src/components/settings/Internet.js
@@ -15,7 +15,7 @@ import { maybeUrlRE } from '../../utils';
 
 import SectionHeader from './SectionHeader';
 import { FullWidthRow } from '../helpers';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 
 const propTypes = {
   githubProfile: PropTypes.string,
diff --git a/client/src/components/settings/Portfolio.js b/client/src/components/settings/Portfolio.js
index 5d9f60b67f..3f38ce719f 100644
--- a/client/src/components/settings/Portfolio.js
+++ b/client/src/components/settings/Portfolio.js
@@ -16,7 +16,7 @@ import { hasProtocolRE } from '../../utils';
 
 import { FullWidthRow, ButtonSpacer, Spacer } from '../helpers';
 import SectionHeader from './SectionHeader';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
+import BlockSaveButton from '../helpers/form/block-save-button';
 
 const propTypes = {
   picture: PropTypes.string,
diff --git a/client/src/components/settings/Username.js b/client/src/components/settings/Username.js
index 9a6f53ed4a..7e62144086 100644
--- a/client/src/components/settings/Username.js
+++ b/client/src/components/settings/Username.js
@@ -16,8 +16,8 @@ import {
   usernameValidationSelector,
   submitNewUsername
 } from '../../redux/settings';
-import BlockSaveButton from '../helpers/form/BlockSaveButton';
 import FullWidthRow from '../helpers/full-width-row';
+import BlockSaveButton from '../helpers/form/block-save-button';
 import { isValidUsername } from '../../../../utils/validate';
 
 const propTypes = {