title: How to use redux store to properly update EditorState in Draft.js
body: <p>I am having a bit of difficulty setting a conditional that utilizes <code>EditorState.createEmtpy()</code> or <code>EditorState.createWithContent()</code>.  Basically, if the fetched data contains a saved record, I want to display that content.  If not, then I want <code>EditorState.createEmtpy()</code></p>
  
  <p>To start, here is my actual TextEditor container:</p>
  
  <pre><code>import React, { Component } from 'react';
  import './styles/TextEditor.css';
  import { Editor, EditorState, convertToRaw, convertFromRaw, ContentState} from 'draft-js';
  import { connect } from 'react-redux';
  import { addNewRecord, getRecord } from '../actions/recordActions.js';
  import { bindActionCreators } from 'redux';
  
  class TextEditor extends Component {
      constructor(props){
          super(props);
          this.state = {
              editorState: EditorState.createEmpty()
          }
  
  
              this.onChange = (editorState) =&gt; {
                  const contentState = this.state.editorState.getCurrentContent();
                  const editorStateJSONFormat = convertToRaw(contentState)
                  this.props.addNewRecord(editorStateJSONFormat);
                  this.setState({
                      editorState
                  });
              }
          }
  
  
          componentDidMount = (props) =&gt; {
              this.props.getRecord()
          }
  
          componentWillReceiveProps = (nextProps, prevProps) =&gt; {
              let lastRecord;
              for (let i = nextProps.records.length; i &gt; 0; i--){
                  if (i === nextProps.records.length - 1){
                      lastRecord = nextProps.records[i].body
                  }
              }
              const replaceRubyHashRocket = /=&gt;/g
              const content = lastRecord.replace(replaceRubyHashRocket, ":")
  
  
              if (nextProps.records.length &gt;= 1){
                  this.setState({
                      editorState: EditorState.createWithContent(convertFromRaw(JSON.parse(content)))
                  })
              } else{
                  this.setState({
                      editorState: EditorState.createEmpty()
                  })
              }
          }
  
  
      render(){
          return(
              &lt;div id="document-container"&gt;
                  &lt;div &gt;
                      &lt;Editor 
                          editorState={this.state.editorState} 
                          onChange={this.onChange} 
                          placeholder="Type Below"
                          ref={this.setDomEditorRef}
                      /&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          )
      }
  }
  
  const mapStateToProps = (state) =&gt; {
    return ({
      records: state.allRecords.records
    });
  };
  
  const mapDispatchToProps = (dispatch) =&gt; {
    return bindActionCreators({
      getRecord,
      addNewRecord
    }, dispatch);
  };
  
  export default connect(mapStateToProps, mapDispatchToProps)(TextEditor)
  </code></pre>
  
  <p>Everything is working fine but I am completely lost as to what component lifecycle method I should be using.</p>
  
  <p>As it stands, I can type something into the editor, refresh, and then the editor will display the correct content (the last element in the array).  The problem is, when I go to add more content in the editor, I get an error that says <code>content</code> is undefined.  It's like my loop getting the last element is now void?</p>
  
  <p>For context, here is my reducer:</p>
  
  <pre><code>export default function manageDocuments(state = {loading: false,
  }, action) {
      switch(action.type) {
          case 'PUSHING_RECORD':
              return {...state, loading: true}
          case "ADD_RECORD":
              return {...state, loading: false, records: action.payload}
  
          case "LOADING_RECORD":
              return {...state, loading: true}
          case "GET_RECORD":
              return {loading: false, ...state, records: action.payload}
  
          default:
              return {...state}
      }
  };
  </code></pre>
  
  <p>Here is my action for POST/GET request from my Rails API.</p>
  
  <pre><code>import fetch from 'isomorphic-fetch';
  
  export function addNewRecord(editorStateJSONFormat) {
      const request = {
          method: 'POST',
          headers: {
              'Content-Type': 'application/json; charset=utf-8', "Accepts": "application/json"
          },
          body: JSON.stringify({body: editorStateJSONFormat})
      }
  
      return (dispatch) =&gt; {
          dispatch({type: 'PUSHING_RECORD'});
          return fetch('http://localhost:3001/api/v1/documents', request)
              .then(response =&gt; response.json())
              .then(records =&gt; {
                  dispatch({type: 'ADD_RECORD', payload: records})
          });
      }
  }
  
  export function getRecord() {
      return (dispatch) =&gt; {
          dispatch({type: 'LOADING_RECORD'});
  
          return fetch('http://localhost:3001/api/v1/documents', {method: 'GET'})
              .then(response =&gt; response.json())
              .then(records =&gt; dispatch({type: 'GET_RECORD', payload: records}));
          }
  }
  </code></pre>
  
  <p>I combined reducers here (don't really need to at this point):</p>
  
  <pre><code>import { combineReducers } from 'redux';
  import docsReducer from './docsReducer';
  
      export default combineReducers({
        allRecords: docsReducer
      })
  </code></pre>
  
  <p>I am pretty lost here. How could I achieve this?</p>