Redux-Form and React-RTE - Save RTE editorValue to form state?
<p>I'm brand new to React/Redux and the works, so please excuse any naive assumptions/questions here... </p>

<p>I've managed to make a good amount of progress in the onboarding flow I'm building for my app thanks to the documentation for redux-form - it's a fantastic library!</p>

<p>However, I'm now running into a few issues because I'm trying to pass an instance of React-RTE (<a href="https://github.com/sstur/react-rte" rel="nofollow">https://github.com/sstur/react-rte</a>) as a custom Field component. I've been following the documentation <a href="http://redux-form.com/6.0.0-alpha.4/docs/faq/CustomComponent.md/" rel="nofollow">here</a>. So far I've been able to render the RTE and log the editorValue prop to the console, but I can't for the life of me get the form value to save to the form state. I asked posted this question as an issue on the redux-form gitrepo, but it probably makes sense to post here as well, as others may be having issues with custom Field Components. Any help would be much appreciated! </p>

<p>Here's the code I've been experimenting with:</p>

<p><strong>My Form container (RoleForm.jsx) - snippet in question is JDEditor:</strong></p>

<pre><code>import React, {Component, PropTypes} from 'react';
import { connect } from 'react-redux'
import { Field, reduxForm, formValueSelector } from 'redux-form'
import validate from './validate.jsx'
import renderField from './renderField.jsx'
import JDEditor from './JDEditor.jsx'

const renderError = ({ meta: { touched, error } }) =&gt; touched &amp;&amp; error ?
  &lt;span&gt;{error}&lt;/span&gt; : false

class RoleForm extends React.Component {
   constructor(props) {
        super(props);
    }

    handleChange(editorValue){
      console.log("CHANGE | EditorValue: " + editorValue)
    }

    handleBlur(editorValue){
      console.log("BLUR | EditorValue: " + editorValue)
    }

     handleFocus(editorValue){
      console.log("FOCUS | EditorValue: " + editorValue)
    }

   render(){
    let { handleSubmit, previousPage, company, value} = this.props

    return (
      &lt;div className="login-wrapper"&gt;
      &lt;div className="form" style={{borderRadius:4, margin:'0 auto', padding:24, maxWidth:780}}&gt;
      &lt;h3 style={{fontWeight:700}}&gt;Role Details&lt;/h3&gt;
      &lt;p&gt;Here's what we were able to pull:&lt;/p&gt;
      &lt;form onSubmit={handleSubmit}&gt;
          &lt;div style={{width:'50%', display:'inline-block'}}&gt;&lt;Field name="role" type="text" component={renderField} label="Role"/&gt;&lt;/div&gt;
          &lt;div style={{width:'50%', display:'inline-block'}}&gt;&lt;Field name="role_url" type="url" component={renderField} label="Role Link"/&gt;&lt;/div&gt;
          &lt;div style={{width:'85%', display:'inline-block', borderBottom:'1px solid'}}&gt;&lt;/div&gt;
          &lt;label style={{display:'block', textAlign:'left', paddingLeft:'8px'}}&gt;Role Description&lt;/label&gt;
          &lt;div style={{display:'inline-block', width:'100%', padding:'0px 8px 8px 8px'}}&gt;
          &lt;Field name="role_description" 
            component={props=&gt;&lt;JDEditor format={'html'} value={{rte_value:props.editorValue}} onFocus={this.handleFocus.bind(this)} onBlur={this.handleBlur.bind(this)} onChange={this.handleChange.bind(this)} {...props} /&gt;} /&gt;
          &lt;/div&gt;
        &lt;div style={{marginTop:'10px', clear:'both'}}&gt;
          &lt;button type="button" className="btn btn-default" style={{width:'100px', marginRight:'4px'}} onClick={previousPage}&gt;Back&lt;/button&gt;
          &lt;button type="submit" className="btn btn-primary" style={{width:'100px'}}&gt;Continue&lt;/button&gt;
        &lt;/div&gt;
      &lt;/form&gt;
      &lt;/div&gt;
      &lt;div style={{padding:'100%', background:'#f7f7f7'}}&gt;
      &lt;/div&gt;
      &lt;/div&gt;
    )
  }
}

export default RoleForm = reduxForm({
  form: 'onboarding',
  destroyOnUnmount: false,
  validate
})(RoleForm)
</code></pre>

<p><strong>And the JDEditor class:</strong></p>

<pre><code>import React, {Component} from 'react';
import RichTextEditor, {createEmptyValue} from 'react-rte';
import autobind from 'class-autobind';

import type {EditorValue} from 'react-rte';

type Props = {
  value: string;
  format: string;
  onChange: (value: string) =&gt; any;
};
type State = {
  editorValue: EditorValue;
};

export default class JDEditor extends Component {
  props: Props;
  state: State;
  // The [format, value] of what's currently displayed in the     &lt;RichTextEditor /&gt;
  _currentValue: ?[string, string];

  constructor() {
    super(...arguments);
    autobind(this);
    this.state = {
      editorValue: createEmptyValue(),
    };
  }

  componentWillMount() {
    this._updateStateFromProps(this.props);
  }

  componentWillReceiveProps(newProps: Props) {
    this._updateStateFromProps(newProps);
  }

  _updateStateFromProps(newProps: Props) {
    let {value, format} = newProps;
    if (this._currentValue != null) {
      let [currentValue, currentFormat] = this._currentValue;
      if (format === currentFormat &amp;&amp; value === currentValue) {
        return;
      }
    }
    let {editorValue} = this.state;
    this.setState({
      editorValue: editorValue.setContentFromString(value, format),
    });
    this._currentValue = [format, value];
  }

  render() {
    let {value, format, onChange, ...otherProps} = this.props; // eslint-disable-line no-unused-vars
    return (
      &lt;RichTextEditor
        {...otherProps}
        value={this.state.editorValue}
        onChange={this._onChange}
      /&gt;
    );
  }

  _onChange(editorValue: EditorValue) {
    let {format, onChange} = this.props;
    let oldEditorValue = this.state.editorValue;
    this.setState({editorValue});
    let oldContentState = oldEditorValue ?     oldEditorValue.getEditorState().getCurrentContent() : null;
    let newContentState = editorValue.getEditorState().getCurrentContent();
    if (oldContentState !== newContentState) {
      let stringValue = editorValue.toString(format);
      // Optimization so if we receive new props we don't need
      // to parse anything unnecessarily.
      this._currentValue = [format, stringValue];
      if (onChange &amp;&amp; stringValue !== this.props.value) {
        onChange(stringValue);
      }
    }
  } 
}
</code></pre>