diff --git a/web/input/input-state-container.react.js b/web/input/input-state-container.react.js
--- a/web/input/input-state-container.react.js
+++ b/web/input/input-state-container.react.js
@@ -518,7 +518,7 @@
     );
 
     if (appendResults.some(({ result }) => !result.success)) {
-      setModal(<InvalidUploadModal setModal={setModal} />);
+      setModal(<InvalidUploadModal />);
 
       const time = Date.now() - selectionTime;
       const reports = [];
diff --git a/web/modals/chat/invalid-upload.react.js b/web/modals/chat/invalid-upload.react.js
--- a/web/modals/chat/invalid-upload.react.js
+++ b/web/modals/chat/invalid-upload.react.js
@@ -1,27 +1,23 @@
 // @flow
 
+import invariant from 'invariant';
 import * as React from 'react';
 
+import { ModalContext } from '../../modals/modal-provider.react';
 import css from '../../style.css';
 import Modal from '../modal.react';
 
-type Props = {
-  +setModal: (modal: ?React.Node) => void,
-};
-class InvalidUploadModal extends React.PureComponent<Props> {
-  render(): React.Node {
-    return (
-      <Modal name="Invalid upload" onClose={this.clearModal}>
-        <div className={css['modal-body']}>
-          <p>We don&apos;t support that file type yet :(</p>
-        </div>
-      </Modal>
-    );
-  }
+function InvalidUploadModal(): React.Node {
+  const modalContext = React.useContext(ModalContext);
+  invariant(modalContext, 'ModalContext not found');
 
-  clearModal: () => void = () => {
-    this.props.setModal(null);
-  };
+  return (
+    <Modal name="Invalid upload" onClose={modalContext.clearModal}>
+      <div className={css['modal-body']}>
+        <p>We don&apos;t support that file type yet :(</p>
+      </div>
+    </Modal>
+  );
 }
 
 export default InvalidUploadModal;