React unmount and remount child component

Question

I have an npm imported component (CKEditor) that only cares about the state of its parent component at the time it mounts. I.e., no matter what changes occur in the state of the parent component, CKEditor won't reflect those changes if it has already mounted.

This is an issue for me because I need CKEditor to change based on the state of the parent component when the parent component changes its language prop.

Is there a way for me to make a child component unmount and mount again from the parent component? For example, is there a way for me to unmount and mount again a child component based on the parent component's "componentWillReceiveProps"?

    import React from 'react';
    import CKEditor from "react-ckeditor-component";

    export default class EditParagraph extends React.Component {
        constructor(props) {
            super(props)
            this.state = {
                // an object that has a different html string for each potential language
                content: this.props.specs.content,
            }
            this.handleRTEChange = this.handleRTEChange.bind(this)
            this.handleRTEBlur = this.handleRTEBlur.bind(this)
        }

        /**
         * Native React method 
         *  that runs every time the component is about to receive new props.
         */
        componentWillReceiveProps(nextProps) {
            const languageChanged = this.props.local.use_lang != nextProps.local.use_lang;
            if (languageChanged) {
                // how do I unmount the CKEditor and remount it ???
                console.log('use_lang changed');
            }
        }

        handleRTEChange(evt) {
            // keeps track of changes within the correct language section
        }

        handleRTEBlur() {
            // fully updates the specs only on Blur
        }

        getContent () {
            // gets content relative to current use language
        }

        render() {
            const content = this.getContent();

            // This is logging the content relative to the current language (as expected), 
            // but CKEditor doesn't show any changes when content changes.
            console.log('content:', content);

            // I need to find a way of unmounting and re-mounting CKEditor whenever use_lang changes.
            return (
                <div>
                    <CKEditor 
                        content={content} 
                        events={{
                            "blur": this.handleRTEBlur,
                            "change": this.handleRTEChange
                        }}
                    />
                </div>      
            )
        }
    }

Answer 1

Since CKEditor only uses "content" prop when it mounts, I needed to re-render the component when the local.use_lang of the parent component changes.

CKEditor can be forced to re-render by giving it a key prop equal to the value that should force it to re-render:

<CKEditor key={this.props.local.use_lang} etc />

This way, whenever the language prop changes, React creates a new CKEditor.

Keep in mind that I made use of this solution because CKEditor is a foreign component library that I installed with npm. If it was my own code I was working with, I would just make changes to how the Editor uses its props. However, since I refuse to make changes to foreign library code, this is the solution that allowed me to force a re-render without having to touch the internals of the Editor code.