changes not showing up in state when using TinyMCE in my React Component

Question

I am trying to use TinyMCE with React and State. I have the React component you see below.

When it loads, it is loading the initial text passed into it as props.

But if I update any of it, I never see any updates in the console.log that I put in render console.log("labText fo this page: ", labText);.

I am trying to save the text changes to state using this.state.

Is there anything else I need to do?

Thanks!

import React from 'react';
import { Editor } from '@tinymce/tinymce-react';

class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    handleEditorChange = (content, editor) => {
        console.log('Content was updated:', content);
        this.setState({ text: content });
    }

    render() {
        const { deptId, labText } = this.props;
        this.state
        console.log("DeptId for TinyMCE: ", deptId);
        console.log("labText fo this page: ", labText);
        return (
            <Editor
                initialValue={labText}
                init={{
                    height: 500,
                    menubar: false,
                    plugins: [
                        'advlist autolink lists link '
                    ],
                    toolbar:
                        'undo redo | formatselect | bold italic  | \
                        alignleft alignright alignjustify | \
                        removeformat | help |'
                }}
                onEditorChange={this.handleEditorChange}
            />
        );
    }
}

export default App;

Answer 1

labText it's only initial value which isn't updated when editor change. If you want to use Editor as controlled component you should use value property.

class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = { text: '' };
    }

    handleEditorChange = (content, editor) => {
        console.log('Content was updated:', content);
        this.setState({ text: content });
    }

    render() {
        console.log("labText fo this page: ", this.state.text);
        return (
            <Editor
                init={{
                    height: 500,
                    menubar: false,
                    plugins: [
                        'advlist autolink lists link '
                    ],
                    toolbar:
                        'undo redo | formatselect | bold italic  | \
                        alignleft alignright alignjustify | \
                        removeformat | help |'
                }}
                value={this.state.text}
                onEditorChange={this.handleEditorChange}
            />
        );
    }
}

You can pass value as a props but if you use this approach you also should pass callback from parent which handle value change.