title: ReactJS receiving data from API passing it as props to DraftJS
body: <p>I'm relatively new to Reactjs and I've got little dilemma here. I'm using <a href="https://draftjs.org/" rel="nofollow noreferrer">Draftjs</a> as a WYSIWYG editor in a simple app. When receiving data from an API (as you normally would) then passing it to a child component via props, I'm having issue to update EditorState. I assume I need to create EditorState as such at the beginning:</p>
  
  <pre><code>componentWillMount() {
     this.setState({editorState: EditorState.createEmpty()});
  }
  </code></pre>
  
  <p>Then when I received props from an API I'd like to update the EditorState with the props received. So in my head and ideal world I'd do something like this:</p>
  
  <pre><code>componentWillReceiveProps() {
     let processedHTML = DraftPasteProcessor.processHTML(this.props.text);
     let contentState = ContentState.createFromBlockArray(processedHTML);
  
     this.setState({editorState: EditorState.createWithContent(contentState)});
  }
  </code></pre>
  
  <p>But that doesn't seem to be the case. ComponentWillReceiveProps() as I was reading up online doesn't wait until props have updated to the value passed from an API, ComponentWilLReceiveProps() runs before data from an API is received and I get the following error: </p>
  
  <p><a href="https://i.stack.imgur.com/mIRyf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/mIRyf.png" alt="Cannot read property &#39;trim&#39; of undefined DraftJS"></a></p>
  
  <p>Anyone with a little more experience in Reactjs could advise me on this? How to update EditorSTate when the information is received from an API. Maybe its worth noting, this is how I pass data to the component from parent.</p>
  
  <pre><code>&lt;WysiwygEditor full={true} text={this.props.error.errorText}/&gt;
  </code></pre>