DraftJS Uncaught TypeError: Cannot read property 'blocks' of undefined
<p>I'm trying to read data from database and then render to the DOM via react. For the input, I used draft.js and run convertToRaw on it before saving to the db. However, when I run convertFromRaw and render, I get this error in the console: "Uncaught TypeError: Cannot read property 'blocks' of undefined". This is my first time using draft.js so I'm not sure what I'm doing wrong. Can someone please help? Thank you so much! </p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>//App.js


import React, {
  Component
}
from 'react';
import Blogs from './blogs';
import {
  Editor, EditorState, convertToRaw
}
from 'draft-js'
  // include horizon client
const Horizon = require('@horizon/client');
const horizon = Horizon({
  secure: false
});
// init blogs collection in rethinkdb
const blogger = horizon('blogs')

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      title: false,
      author: false,
      editorState: EditorState.createEmpty()
    }
  }

  // watch form values for change
  handleChangeTitle(event) {
    this.setState({
      title: event.target.value
    });
  }
  handleChangeAuthor(event) {
    this.setState({
      author: event.target.value
    });
  }
  handleChangeBody(editorState) {
    this.setState({
      editorState
    });
  }

  writeBlog() {
    // check for empty string and return error to user
    if (this.state.title === false || this.state.author === false || this.state.body === false) {
      alert('Invalid Submission: One or more fields are empty');
      return;
    }
    let blog = {
      title: this.state.title,
      author: this.state.author,
      editorState: convertToRaw(this.state.editorState.getCurrentContent())
    };
    // store the inputs in the database
    blogger.store(blog);
  }

  render() {
    return ( &lt; form &gt;
      &lt; div className = "center" &gt;
      &lt; Blogs blogger = {
        blogger
      }
      /&gt;
                    &lt;div className="writer"&gt;
                    &lt;div className="basic-inputs"&gt;
                        &lt;div className="input-unit"&gt;
                            &lt;label&gt;Title&lt;/label &gt;
      &lt; input onChange = {
        this.handleChangeTitle.bind(this)
      } &gt; &lt; /input&gt;
                        &lt;/div &gt;
      &lt; div className = "input-unit" &gt;
      &lt; label &gt; Author &lt; /label&gt;
                            &lt;input onChange={this.handleChangeAuthor.bind(this)}&gt;&lt;/input &gt;
      &lt; /div&gt;
                    &lt;/div &gt;
      &lt; label &gt; Blog &lt; /label&gt;
                    &lt;Editor onChange={this.handleChangeBody.bind(this)} editorState={this.state.editorState} / &gt;
      &lt; button onClick = {
        this.writeBlog.bind(this)
      } &gt; Post &lt; /button&gt;
                    &lt;/div &gt;
      &lt; /div&gt;
            &lt;/form &gt;
    );
  }
}

export
default App;</code></pre>
</div>
</div>
</p>

<p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
<div class="snippet-code">
<pre class="snippet-code-js lang-js prettyprint-override"><code>import React, { Component } from 'react';
import {convertFromRaw} from 'draft-js'

export default class Blog extends Component {
    constructor(props) {
        super(props)
        this.props = props;

    }

    render() {
        return (
            &lt;div className="blog-container"&gt;
            &lt;h2 className="title"&gt;{this.props.blg.title}&lt;/h2&gt;
            &lt;h4 className="author"&gt;{this.props.blg.author}&lt;/h4&gt;
            &lt;p className="body"&gt;{convertFromRaw(this.props.blg.body)}&lt;/p&gt;
            &lt;/div&gt;
        );
    }
}</code></pre>
</div>
</div>
</p>