React setState not affecting Children

Question

I use CKEditor For a simple mail form in react, which looks like this:

class SimpleForm extends Component{
constructor() {
    super();
    this.updateContent = this.updateContent.bind(this);
    this.state = {
    title: "MyTitle",
    CKEditorContent: 'text here',
    newMail: false,
    }
    this.baseState = Object.assign({}, this.state, {newMail: true});
}
}

updateContent(newContent) {
      console.log(newContent);
      this.setState({
          CKEditorContent: newContent.editor.getData(),
      })}

clearText(){
      this.setState(this.baseState);
    }

render() {
    return (
          <div>
              <CKEditor
                activeClass="p10"
                content={this.state.CKEditorContent}
                events={{
                  "change": this.updateContent
                }}
              />
                <Button
                  type="submit"
                  label="clear"
                  secondary={true}
                  onClick={this.clearText.bind(this)}
                />
          </div>
    );
}
}

The problem is, that although setState is called correctly - both this.title and this.CKEditorContent have their values reset, BUT the internals of CKeditor field remain unchanged.

before click: after click CLEAR:

Answer 1

According to this issue you need to use CKEditor's setData method to manipulate the state of the input.

So in your case the workaround would be to modify the code like so:

    <CKEditor
      activeClass="p10"
      content={this.state.CKEditorContent}
      events={{
        change: this.updateContent,
      }}
      ref={(instance) => { this.ckeditor = instance; }}
    />

And then in your clearText() function just call it like this:

this.ckeditor.editorInstance.setData('');