diff --git a/.eslintrc-base.json b/.eslintrc-base.json
index e1590fe8cf..fb9225b7ff 100644
--- a/.eslintrc-base.json
+++ b/.eslintrc-base.json
@@ -144,6 +144,7 @@
     "react/jsx-uses-react": 2,
     "react/jsx-uses-vars": 2,
     "react/jsx-wrap-multilines": 2,
+    "react/jsx-fragments": 2,
     "react/no-did-mount-set-state": 2,
     "react/no-did-update-set-state": 2,
     "react/no-multi-comp": [2, { "ignoreStateless": true }],
diff --git a/client/src/assets/icons/green-not-completed.tsx b/client/src/assets/icons/green-not-completed.tsx
index 2351628e4d..d42efbce00 100644
--- a/client/src/assets/icons/green-not-completed.tsx
+++ b/client/src/assets/icons/green-not-completed.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { useTranslation } from 'react-i18next';
 
 function GreenNotCompleted(
diff --git a/client/src/client-only-routes/show-settings.tsx b/client/src/client-only-routes/show-settings.tsx
index 6a9c228a9f..b40ce6a3af 100644
--- a/client/src/client-only-routes/show-settings.tsx
+++ b/client/src/client-only-routes/show-settings.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
 import { Grid } from '@freecodecamp/react-bootstrap';
diff --git a/client/src/components/settings/toggle-setting.tsx b/client/src/components/settings/toggle-setting.tsx
index 2026d55e02..c3f74765b5 100644
--- a/client/src/components/settings/toggle-setting.tsx
+++ b/client/src/components/settings/toggle-setting.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment } from 'react';
+import React from 'react';
 import {
   FormGroup,
   ControlLabel,