title: React TinyMCE - Data Not Binding
body: <p>I created a <code>textarea</code> React component with an option to use Tiny MCE, which Im implementing using the <code>react-tinymce</code> component. </p>
  
  <pre><code>import React, { Component } from "react";
  import TinyMCE from "react-tinymce";
  
  class Textarea extends Component {
    constructor(props) {
      super(props);
  
      this.state = {
        data: {
          body: ""
        }
      };
    }
  
    // ..a few methods not relevant to this question..
  
    handleFieldChange(e) {
      const data = { ...this.state.data };
      data[e.target.name] = e.target.value;
      this.setState({ data });
    }
  
    render() {
      return (
        &lt;div&gt;
          {this.props.showLabel ? (
            &lt;label htmlFor={this.props.id}&gt;{this.props.label}&lt;/label&gt;
          ) : null}
  
          {!this.props.mce ? (
            &lt;textarea
              className={`form-control ${this.state.error ? "error" : ""}`}
              id={this.props.id}
              type={this.props.type}
              name={this.props.name}
              value={this.props.value}
              placeholder={this.props.placeholder}
              onChange={this.handleFieldChange}
            /&gt;
          ) : (
            &lt;TinyMCE
              name={this.props.name}
              content={this.props.value}
              config={{
                plugins: "autolink link image lists print preview code",
                toolbar:
                  "undo redo | bold italic | alignleft aligncenter alignright | code",
                height: 300,
                branding: false,
                statusbar: false,
                menubar: false
              }}
              onChange={this.handleFieldChange}
            /&gt;
          )}
        &lt;/div&gt;
      );
    }
  }
  
  export default Textarea;
  </code></pre>
  
  <p>I would basically use the component like this:           </p>
  
  <pre><code>&lt;Textarea 
    name="body" 
    label="Body"
    showLabel={true}
    placeholder="body"
    value={data.body} 
    mce={true}
  /&gt;
  </code></pre>
  
  <p>So basically if the <code>mce</code> prop is set to <code>true</code> you get the TinyMCE component. </p>
  
  <p>But while the regular <code>textarea</code> version binds whatever you type into  <code>state.data.body</code>, the TinyMCE version does not. </p>
  
  <pre><code>// after typing into TinyMCE and submitting
  console.log(this.state.data.body); // empty string
  </code></pre>
  
  <p><strong>please note this <code>Textarea</code> component is used as part of a form component with an onSubmit method.</strong></p>