diff --git a/app/soapbox/components/autosuggest_emoji.js b/app/soapbox/components/autosuggest_emoji.js
deleted file mode 100644
index e16d2a2c5..000000000
--- a/app/soapbox/components/autosuggest_emoji.js
+++ /dev/null
@@ -1,43 +0,0 @@
-import PropTypes from 'prop-types';
-import React from 'react';
-
-import { joinPublicPath } from 'soapbox/utils/static';
-
-import unicodeMapping from '../features/emoji/emoji_unicode_mapping_light';
-
-export default class AutosuggestEmoji extends React.PureComponent {
-
-  static propTypes = {
-    emoji: PropTypes.object.isRequired,
-  };
-
-  render() {
-    const { emoji } = this.props;
-    let url;
-
-    if (emoji.custom) {
-      url = emoji.imageUrl;
-    } else {
-      const mapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
-
-      if (!mapping) {
-        return null;
-      }
-
-      url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
-    }
-
-    return (
-      <div className='autosuggest-emoji' data-testid='emoji'>
-        <img
-          className='emojione'
-          src={url}
-          alt={emoji.native || emoji.colons}
-        />
-
-        {emoji.colons}
-      </div>
-    );
-  }
-
-}
diff --git a/app/soapbox/components/autosuggest_emoji.tsx b/app/soapbox/components/autosuggest_emoji.tsx
new file mode 100644
index 000000000..ba6f5671a
--- /dev/null
+++ b/app/soapbox/components/autosuggest_emoji.tsx
@@ -0,0 +1,50 @@
+import React from 'react';
+
+import unicodeMapping from 'soapbox/features/emoji/emoji_unicode_mapping_light';
+import { joinPublicPath } from 'soapbox/utils/static';
+
+type Emoji = {
+  custom: boolean,
+  imageUrl: string,
+  native: string,
+  colons: string,
+}
+
+type UnicodeMapping = {
+  filename: string,
+}
+
+interface IAutosuggestEmoji {
+  emoji: Emoji,
+}
+
+const AutosuggestEmoji: React.FC<IAutosuggestEmoji> = ({ emoji }) => {
+  let url;
+
+  if (emoji.custom) {
+    url = emoji.imageUrl;
+  } else {
+    // @ts-ignore
+    const mapping: UnicodeMapping = unicodeMapping[emoji.native] || unicodeMapping[emoji.native.replace(/\uFE0F$/, '')];
+
+    if (!mapping) {
+      return null;
+    }
+
+    url = joinPublicPath(`packs/emoji/${mapping.filename}.svg`);
+  }
+
+  return (
+    <div className='autosuggest-emoji' data-testid='emoji'>
+      <img
+        className='emojione'
+        src={url}
+        alt={emoji.native || emoji.colons}
+      />
+
+      {emoji.colons}
+    </div>
+  );
+};
+
+export default AutosuggestEmoji;