diff --git a/src/js/App.jsx b/src/js/App.jsx
index 74110b0..3b2fa01 100644
--- a/src/js/App.jsx
+++ b/src/js/App.jsx
@@ -50,29 +50,13 @@ const App = React.createClass({
     },
 
     onModalUpdate(newModalState) {
-        const oldModalState = this.state.modal;
-
-        function onKeyUp(e) {
-            // esc key closes modal
-            if (e.keyCode === 27) {
-                Actions.hideModal();
-            }
-        }
-
-        // pressing esc closes modal
-        if (!oldModalState.type && newModalState.type) {
-            document.addEventListener('keyup', onKeyUp);
-        } else if (oldModalState.type && !newModalState.type) {
-            document.removeEventListener('keyup', onKeyUp);
-        }
-
         this.setState({
             modal: newModalState
         });
     },
 
     hideModal(e) {
-        e.preventDefault();
+        if (e) { e.preventDefault(); }
         Actions.hideModal();
     },
 
diff --git a/src/js/components/Modal.jsx b/src/js/components/Modal.jsx
index ff82e86..2c6f6db 100644
--- a/src/js/components/Modal.jsx
+++ b/src/js/components/Modal.jsx
@@ -13,6 +13,22 @@ const Modal = React.createClass({
         ]).isRequired
     },
 
+    componentDidMount() {
+        // allow esc to close modal
+        document.addEventListener('keyup', this.onKeyUp);
+    },
+
+    componentWillUnmount() {
+        document.removeEventListener('keyup', this.onKeyUp);
+    },
+
+    onKeyUp(e) {
+        // esc key closes modal
+        if (e.keyCode === 27) {
+            this.props.hideModal();
+        }
+    },
+
     render() {
         const { hideModal, children } = this.props;