--- a/client/src/components/NoteInput.js	Tue Nov 06 16:19:26 2018 +0100
+++ b/client/src/components/NoteInput.js	Thu Nov 08 16:03:28 2018 +0100
@@ -6,6 +6,14 @@
 
 class NoteInput extends Component {
 
+  constructor(props) {
+    super(props);
+    this.editorInst = React.createRef();
+  }
+
+  get editor() {
+    return this.editorInst.current;
+  }
   state = {
     buttonDisabled: false,
     startedAt: null,
@@ -22,10 +30,10 @@
 
   onAddNoteClick = () => {
 
-    const plain = this.refs.editor.asPlain();
-    const raw = this.refs.editor.asRaw();
-    const html = this.refs.editor.asHtml();
-    const categories = this.refs.editor.asCategories();
+    const plain = this.editor.asPlain();
+    const raw = this.editor.asRaw();
+    const html = this.editor.asHtml();
+    const categories = this.editor.asCategories();
     // const marginComment = this.marginComment.value;
 
     this.props.addNote(this.props.session, {
@@ -40,8 +48,8 @@
     });
 
 
-    this.refs.editor.clear();
-    setTimeout(() => this.refs.editor.focus(), 250);
+    this.editor.clear();
+    setTimeout(() => this.editor.focus(), 250);
   }
 
   onCheckboxChange = (e) => {
@@ -49,8 +57,10 @@
   }
 
   componentDidMount() {
-    const text = this.refs.editor.asPlain();
-    this.setState({ buttonDisabled: text.length === 0 });
+    if(this.editor) {
+      const text = this.editor.asPlain();
+      this.setState({ buttonDisabled: text.length === 0 });
+    }
   }
 
   render() {
@@ -58,7 +68,7 @@
       <form>
         <div className="editor mb-3">
           <div className="editor-left sticky-bottom px-2">
-            <SlateEditor ref="editor"
+            <SlateEditor editorRef={this.editorInst}
               onChange={this.onEditorChange}
               onEnterKeyDown={this.onAddNoteClick}
               onButtonClick={this.onAddNoteClick}