diff --git a/web/calendar/day.react.js b/web/calendar/day.react.js
--- a/web/calendar/day.react.js
+++ b/web/calendar/day.react.js
@@ -217,12 +217,7 @@
 
   createNewEntry = (threadID: string) => {
     if (!this.props.loggedIn) {
-      this.props.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const viewerID = this.props.viewerID;
diff --git a/web/calendar/entry.react.js b/web/calendar/entry.react.js
--- a/web/calendar/entry.react.js
+++ b/web/calendar/entry.react.js
@@ -258,12 +258,7 @@
 
   onChange: (event: SyntheticEvent<HTMLTextAreaElement>) => void = event => {
     if (!this.props.loggedIn) {
-      this.props.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     const target = event.target;
@@ -406,12 +401,7 @@
   onDelete: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
     event.preventDefault();
     if (!this.props.loggedIn) {
-      this.props.setModal(
-        <LogInFirstModal
-          inOrderTo="edit this calendar"
-          setModal={this.props.setModal}
-        />,
-      );
+      this.props.setModal(<LogInFirstModal inOrderTo="edit this calendar" />);
       return;
     }
     this.dispatchDelete(this.props.entryInfo.id, true);
diff --git a/web/modals/account/log-in-first-modal.react.js b/web/modals/account/log-in-first-modal.react.js
--- a/web/modals/account/log-in-first-modal.react.js
+++ b/web/modals/account/log-in-first-modal.react.js
@@ -1,44 +1,44 @@
 // @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';
 import LogInModal from './log-in-modal.react';
 
 type Props = {
   +inOrderTo: string,
-  +setModal: (modal: ?React.Node) => void,
 };
-class LogInFirstModal extends React.PureComponent<Props> {
-  render(): React.Node {
-    return (
-      <Modal name="Log in" onClose={this.clearModal}>
-        <div className={css['modal-body']}>
-          <p>
-            {`In order to ${this.props.inOrderTo}, you'll first need to `}
-            <a
-              href="#"
-              className={css['show-login-modal']}
-              onClick={this.onClickLogIn}
-            >
-              log in
-            </a>
-            {'.'}
-          </p>
-        </div>
-      </Modal>
-    );
-  }
+function LogInFirstModal(props: Props): React.Node {
+  const modalContext = React.useContext(ModalContext);
+  invariant(modalContext, 'ModalContext not found');
 
-  clearModal: () => void = () => {
-    this.props.setModal(null);
-  };
-
-  onClickLogIn: (event: SyntheticEvent<HTMLAnchorElement>) => void = event => {
+  const onClickLogIn: (
+    event: SyntheticEvent<HTMLAnchorElement>,
+  ) => void = event => {
     event.preventDefault();
-    this.props.setModal(<LogInModal />);
+    modalContext.setModal(<LogInModal />);
   };
+
+  return (
+    <Modal name="Log in" onClose={this.clearModal}>
+      <div className={css['modal-body']}>
+        <p>
+          {`In order to ${props.inOrderTo}, you'll first need to `}
+          <a
+            href="#"
+            className={css['show-login-modal']}
+            onClick={onClickLogIn}
+          >
+            log in
+          </a>
+          {'.'}
+        </p>
+      </div>
+    </Modal>
+  );
 }
 
 export default LogInFirstModal;