React-Wysiwyg via extend React.Component

Example.js

var React = require('react')
var ReactDOM = require('react-dom')
var ContentEditable = require('react-wysiwyg')

class Example extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      text: '',
      editing: false
    }
  }

  render(){
    return (
      <div>
        <ContentEditable
          tagName='div'
          className='BlogCommentBox'
          onChange={this.onChange}
          text={this.state.text}
          placeholder='Your Name'
          autofocus={true}
          maxLength={200}
          editing={this.state.editing}
        />
        <button onClick={this.enableEditing}>
          Enable Editing
        </button>
      </div>
    )
  }

  onChange(text) {
    // in order to render the updated text,
    // you need to pass it as a prop to contentEditable.
    // This gives you increased flexibility.
    this.setState({ text: text });
  }

  enableEditing(){
    // set your contenteditable field into editing mode.
    this.setState({ editing: true });
  }
}

document.addEventListener('DOMContentLoaded', function() {
  var elm = document.getElementById('myDiv')
  if (elm) { ReactDOM.render(<Example />, elm) }
})