I am passing props in component and using directly in suneditor..
const SunEditorForRendering: React.FC<Props> = ({postContent }) => {
const [content, setContent] = useState("hello world");
const editor = useRef<SunEditorCore>();
// The sunEditor parameter will be set to the core suneditor instance when this function is called
const getSunEditorInstance = (sunEditor: SunEditorCore) => {
editor.current = sunEditor;
};
useEffect(() => {
if (postContent) {
editor.current?.core.setContents(postContent);
}
}, [postContent]);
<SunEditor
getSunEditorInstance={getSunEditorInstance}
//setContents={content}
setContents={postContent}
onChange={handleOnChange}
/>
}
Above code does not work as expected and content of editor is stale many times. But if i do not use postcontent directly and first save it in a state and then set state to editor , it works correctly. Working code is
const SunEditorForRendering: React.FC<Props> = ({postContent }) => {
const [content, setContent] = useState("hello world");
const editor = useRef<SunEditorCore>();
// The sunEditor parameter will be set to the core suneditor instance when this function is called
const getSunEditorInstance = (sunEditor: SunEditorCore) => {
editor.current = sunEditor;
};
useEffect(() => {
if (postContent) {
setContent(postContent);//----> first save postcontent to new state
}
}, [postContent]);
useEffect(() => {
if (content) {
editor.current?.setContents(content)//---> here set content to editor
}
},[content]);
<SunEditor
getSunEditorInstance={getSunEditorInstance}
setContents={content}
onChange={handleOnChange}
/>
}
There are other code also , but they are same in both of the situations described above