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;

Kishieel · Accepted Answer · 2021-03-16 19:41:08Z

2

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.

answered Mar 16, 2021 at 19:41

Kishieel

2,0852 gold badges13 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

SkyeBoniwell Over a year ago

But when I do that, the React TinyMCE component is empty because this is missing, initialValue={labText}

Kishieel Over a year ago

You can set something inside this.state.text and it will be displayed from beginning.

SkyeBoniwell Over a year ago

Thanks... I tried adding labText inside my constructor but then I got an error that labText was undefined? So I am not sure how to load that inside there

Kishieel Over a year ago

@SkyeBoniwell maybe this example help you codesandbox.io/s/divine-sky-c91v2?file=/src/App.js

Kishieel Over a year ago

I don't need two classes but you use props.labText so I supposed that you have any kind wrapper component which pass props to children and this kind example can help you better.

|

Collectives™ on Stack Overflow

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

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related