diff --git a/frontend/src/Components/MovieTagList.tsx b/frontend/src/Components/MovieTagList.tsx
new file mode 100644
index 0000000000..02f180fe38
--- /dev/null
+++ b/frontend/src/Components/MovieTagList.tsx
@@ -0,0 +1,16 @@
+import React from 'react';
+import { useSelector } from 'react-redux';
+import createTagsSelector from 'Store/Selectors/createTagsSelector';
+import TagList from './TagList';
+
+interface MovieTagListProps {
+  tags: number[];
+}
+
+function MovieTagList({ tags }: MovieTagListProps) {
+  const tagList = useSelector(createTagsSelector());
+
+  return <TagList tags={tags} tagList={tagList} />;
+}
+
+export default MovieTagList;
diff --git a/frontend/src/Components/TagList.js b/frontend/src/Components/TagList.js
deleted file mode 100644
index fe700b8fe9..0000000000
--- a/frontend/src/Components/TagList.js
+++ /dev/null
@@ -1,37 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-import { kinds } from 'Helpers/Props';
-import sortByProp from 'Utilities/Array/sortByProp';
-import Label from './Label';
-import styles from './TagList.css';
-
-function TagList({ tags, tagList }) {
-  const sortedTags = tags
-    .map((tagId) => tagList.find((tag) => tag.id === tagId))
-    .filter((tag) => !!tag)
-    .sort(sortByProp('label'));
-
-  return (
-    <div className={styles.tags}>
-      {
-        sortedTags.map((tag) => {
-          return (
-            <Label
-              key={tag.id}
-              kind={kinds.INFO}
-            >
-              {tag.label}
-            </Label>
-          );
-        })
-      }
-    </div>
-  );
-}
-
-TagList.propTypes = {
-  tags: PropTypes.arrayOf(PropTypes.number).isRequired,
-  tagList: PropTypes.arrayOf(PropTypes.object).isRequired
-};
-
-export default TagList;
diff --git a/frontend/src/Components/TagList.tsx b/frontend/src/Components/TagList.tsx
new file mode 100644
index 0000000000..9f04d01a8f
--- /dev/null
+++ b/frontend/src/Components/TagList.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { Tag } from 'App/State/TagsAppState';
+import { kinds } from 'Helpers/Props';
+import sortByProp from 'Utilities/Array/sortByProp';
+import Label from './Label';
+import styles from './TagList.css';
+
+interface TagListProps {
+  tags: number[];
+  tagList: Tag[];
+}
+
+function TagList({ tags, tagList }: TagListProps) {
+  const sortedTags = tags
+    .map((tagId) => tagList.find((tag) => tag.id === tagId))
+    .filter((tag) => !!tag)
+    .sort(sortByProp('label'));
+
+  return (
+    <div className={styles.tags}>
+      {sortedTags.map((tag) => {
+        return (
+          <Label key={tag.id} kind={kinds.INFO}>
+            {tag.label}
+          </Label>
+        );
+      })}
+    </div>
+  );
+}
+
+export default TagList;
diff --git a/frontend/src/Components/TagListConnector.js b/frontend/src/Components/TagListConnector.js
deleted file mode 100644
index be7e618e31..0000000000
--- a/frontend/src/Components/TagListConnector.js
+++ /dev/null
@@ -1,17 +0,0 @@
-import { connect } from 'react-redux';
-import { createSelector } from 'reselect';
-import createTagsSelector from 'Store/Selectors/createTagsSelector';
-import TagList from './TagList';
-
-function createMapStateToProps() {
-  return createSelector(
-    createTagsSelector(),
-    (tagList) => {
-      return {
-        tagList
-      };
-    }
-  );
-}
-
-export default connect(createMapStateToProps)(TagList);
diff --git a/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx b/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
index 50ea54a77c..4e9522a2f5 100644
--- a/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
+++ b/frontend/src/Movie/Index/Overview/MovieIndexOverview.tsx
@@ -6,7 +6,7 @@ import Icon from 'Components/Icon';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
-import TagListConnector from 'Components/TagListConnector';
+import MovieTagList from 'Components/MovieTagList';
 import Popover from 'Components/Tooltip/Popover';
 import { icons } from 'Helpers/Props';
 import DeleteMovieModal from 'Movie/Delete/DeleteMovieModal';
@@ -231,7 +231,7 @@ function MovieIndexOverview(props: MovieIndexOverviewProps) {
 
               {overviewOptions.showTags ? (
                 <div className={styles.tags}>
-                  <TagListConnector tags={tags} />
+                  <MovieTagList tags={tags} />
                 </div>
               ) : null}
             </div>
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
index 13d57046e0..c6b27aa6f8 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPoster.tsx
@@ -7,8 +7,8 @@ import Label from 'Components/Label';
 import IconButton from 'Components/Link/IconButton';
 import Link from 'Components/Link/Link';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import MovieTagList from 'Components/MovieTagList';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
-import TagListConnector from 'Components/TagListConnector';
 import TmdbRating from 'Components/TmdbRating';
 import Popover from 'Components/Tooltip/Popover';
 import TraktRating from 'Components/TraktRating';
@@ -346,7 +346,7 @@ function MovieIndexPoster(props: MovieIndexPosterProps) {
       {showTags && tags.length ? (
         <div className={styles.tags}>
           <div className={styles.tagsList}>
-            <TagListConnector tags={tags} />
+            <MovieTagList tags={tags} />
           </div>
         </div>
       ) : null}
diff --git a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
index 42f7c12134..3150f6bceb 100644
--- a/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
+++ b/frontend/src/Movie/Index/Posters/MovieIndexPosterInfo.tsx
@@ -1,8 +1,8 @@
 import React from 'react';
 import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
+import MovieTagList from 'Components/MovieTagList';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
-import TagListConnector from 'Components/TagListConnector';
 import TmdbRating from 'Components/TmdbRating';
 import TraktRating from 'Components/TraktRating';
 import { icons } from 'Helpers/Props';
@@ -261,7 +261,7 @@ function MovieIndexPosterInfo(props: MovieIndexPosterInfoProps) {
     return (
       <div className={styles.tags}>
         <div className={styles.tagsList}>
-          <TagListConnector tags={tags} />
+          <MovieTagList tags={tags} />
         </div>
       </div>
     );
diff --git a/frontend/src/Movie/Index/Table/MovieIndexRow.tsx b/frontend/src/Movie/Index/Table/MovieIndexRow.tsx
index bb9e54a4ac..cc941d03b1 100644
--- a/frontend/src/Movie/Index/Table/MovieIndexRow.tsx
+++ b/frontend/src/Movie/Index/Table/MovieIndexRow.tsx
@@ -6,12 +6,12 @@ import Icon from 'Components/Icon';
 import ImdbRating from 'Components/ImdbRating';
 import IconButton from 'Components/Link/IconButton';
 import SpinnerIconButton from 'Components/Link/SpinnerIconButton';
+import MovieTagList from 'Components/MovieTagList';
 import RottenTomatoRating from 'Components/RottenTomatoRating';
 import RelativeDateCell from 'Components/Table/Cells/RelativeDateCell';
 import VirtualTableRowCell from 'Components/Table/Cells/VirtualTableRowCell';
 import VirtualTableSelectCell from 'Components/Table/Cells/VirtualTableSelectCell';
 import Column from 'Components/Table/Column';
-import TagListConnector from 'Components/TagListConnector';
 import TmdbRating from 'Components/TmdbRating';
 import Tooltip from 'Components/Tooltip/Tooltip';
 import TraktRating from 'Components/TraktRating';
@@ -429,7 +429,7 @@ function MovieIndexRow(props: MovieIndexRowProps) {
         if (name === 'tags') {
           return (
             <VirtualTableRowCell key={name} className={styles[name]}>
-              <TagListConnector tags={tags} />
+              <MovieTagList tags={tags} />
             </VirtualTableRowCell>
           );
         }
diff --git a/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx b/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx
index 5e1a62cb5e..7228546c7c 100644
--- a/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx
+++ b/frontend/src/Settings/DownloadClients/DownloadClients/Manage/ManageDownloadClientsModalRow.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import Label from 'Components/Label';
+import MovieTagList from 'Components/MovieTagList';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
-import TagListConnector from 'Components/TagListConnector';
 import { kinds } from 'Helpers/Props';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
@@ -80,7 +80,7 @@ function ManageDownloadClientsModalRow(
       </TableRowCell>
 
       <TableRowCell className={styles.tags}>
-        <TagListConnector tags={tags} />
+        <MovieTagList tags={tags} />
       </TableRowCell>
     </TableRow>
   );
diff --git a/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx b/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx
index 829ed94c49..7cc9c272f1 100644
--- a/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx
+++ b/frontend/src/Settings/ImportLists/ImportLists/Manage/ManageImportListsModalRow.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import { useSelector } from 'react-redux';
+import MovieTagList from 'Components/MovieTagList';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
-import TagListConnector from 'Components/TagListConnector';
 import { createQualityProfileSelectorForHook } from 'Store/Selectors/createQualityProfileSelector';
 import { SelectStateInputProps } from 'typings/props';
 import firstCharToUpper from 'Utilities/String/firstCharToUpper';
@@ -89,7 +89,7 @@ function ManageImportListsModalRow(props: ManageImportListsModalRowProps) {
       </TableRowCell>
 
       <TableRowCell className={styles.tags}>
-        <TagListConnector tags={tags} />
+        <MovieTagList tags={tags} />
       </TableRowCell>
     </TableRow>
   );
diff --git a/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx b/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx
index c888b84c4f..ada36359e8 100644
--- a/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx
+++ b/frontend/src/Settings/Indexers/Indexers/Manage/ManageIndexersModalRow.tsx
@@ -1,10 +1,10 @@
 import React, { useCallback } from 'react';
 import Label from 'Components/Label';
+import MovieTagList from 'Components/MovieTagList';
 import TableRowCell from 'Components/Table/Cells/TableRowCell';
 import TableSelectCell from 'Components/Table/Cells/TableSelectCell';
 import Column from 'Components/Table/Column';
 import TableRow from 'Components/Table/TableRow';
-import TagListConnector from 'Components/TagListConnector';
 import { kinds } from 'Helpers/Props';
 import { SelectStateInputProps } from 'typings/props';
 import translate from 'Utilities/String/translate';
@@ -91,7 +91,7 @@ function ManageIndexersModalRow(props: ManageIndexersModalRowProps) {
       <TableRowCell className={styles.priority}>{priority}</TableRowCell>
 
       <TableRowCell className={styles.tags}>
-        <TagListConnector tags={tags} />
+        <MovieTagList tags={tags} />
       </TableRowCell>
     </TableRow>
   );