reactjs - tinyMCE React loosing state value

Question

I'm using the tinyMCE editor in my React project. I need a custom button based on number of additional users. If it has 3 additional users, I add 3 additional buttons in my dropdown.

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


const [ totalAdditionalUsers, setTotalAdditionalUsers] = useState(0);

// I get this data from NodeJS backend and set the value inside my useEffect
// I'll simplify the code here
useEffect(() => {
   setTotalAdditionalUsers(myVariable); // The value here is 3, for example
});

console.log(totalAdditionalUsers); // it shows 3

return (
  <>
      <Editor
        apiKey={TINYMCEKEY}
        value={editorContent}
        init={{
            height: 600,
            menubar: false,
            branding: false,
            plugins: [
                "print"
            ],
            setup: function (editor) {
                editor.ui.registry.addMenuButton('addAllSignatures', {
                    text: "Users Signature",
                    fetch: function (callback) {
                        var items = [
                            {
                                type: 'menuitem',
                                text: 'Primary User Signature',
                                onAction: function () {
                                    editor.insertContent('&nbsp;<strong>#userSignature#</strong>&nbsp;');
                                }
                            }, {
                                type: 'menuitem',
                                text: 'Primary User Signature Date',
                                onAction: function () {
                                    editor.insertContent('&nbsp;<strong>#userSignatureDate#</strong>&nbsp;');
                                }
                            }
                        ];
                            console.log(totalAdditionalUsers); // It is showing 0. Why??
                        for(let i=1; i<=totalAdditionalUsers; i++) {
                            let s = 'th';
                            if(i === 1)         s = 'nd';
                            else if(i === 2)    s = 'th';
                            const objSign = {
                                type: 'menuitem',
                                text: `${(i+1)}${s}User Signature`,
                                onAction: function () {
                                    editor.insertContent(`&nbsp;<strong>#addUser${i}#</strong>&nbsp;`);
                                }
                            };
                            const objDate = {
                                type: 'menuitem',
                                text: `${(i+1)}${s}User Signature Date`,
                                onAction: function () {
                                    editor.insertContent(`&nbsp;<strong>#addUser${i}SignatureDate#</strong>&nbsp;`);
                                }
                            };
                            items.push(objSign);
                            items.push(objDate);
                        }
                        callback(items);
                    }
                })
            },
            toolbar1: "print | addAllSignatures"
        }}
        onEditorChange={handleEditorChange}
    />
  </>
);

My issue, it that inside the TinyMCE editor, the totalAdditionalUsers is always 0. Looks like it is not updating. Am I setting in wrong?

Thanks

question from:https://stackoverflow.com/questions/66051218/tinymce-react-loosing-state-value

Answer 1

Waitting for answers