Can't call setState on a component that is not yet mounted. This is a no-op, but it might indicate a bug in your application. Instead, assign to `this.state` directly or define a `state = {};` class property with the desired state in the r component. console.<computed> @ index.js:1 printWarning @ react.development.js:220 error @ react.development.js:196 warnNoop @ react.development.js:236 enqueueSetState @ react.development.js:307 push../node_modules/react/cjs/react.development.js.Component.setState @ react.development.js:365 l.expandCollapse @ react-draft-wysiwyg.js:7 (anonymous) @ react-draft-wysiwyg.js:7 closeAllModals @ react-draft-wysiwyg.js:7 (anonymous) @ react-draft-wysiwyg.js:7

[Rahul04128]

anywhere i click on screen i get this this error

[tomatobybike]

me too

[Fox4148]

The #1044 is fixing this.

[OrLevy23]

any idea of an eta about when this should be merged?

[atesibrahim]

Hi, I'm also getting this error. When I opened the page I got this error. I've added condition before Editor loading, the error was gone. But when I returned the previous page by clicking Cancel(can be found at the following code) the error is occurring. What is wrong with this code? Any help is appreciated.

Thnx

My Code;

import React, { useState, useEffect, useCallback } from "react";

import "../styles/Pages.css";
import { useLocation, Link } from "react-router-dom";
import { API } from "@aws-amplify/api";

import "draft-js/dist/Draft.css";
import { Editor } from "react-draft-wysiwyg";
import { EditorState, ContentState } from "draft-js";
import "react-draft-wysiwyg/dist/react-draft-wysiwyg.css";

const TDetails = (props) => {
const [tacState, setTacState] = useState(null);

const createWithContent = useCallback(
(param) => EditorState.createWithContent(param),
[]
);
const createEmpty = useCallback(() => EditorState.createEmpty(), []);
const createFromText = useCallback(
(param) => ContentState.createFromText(param),
[]
);

const getTacInfo = useCallback(
async (e) => {
try {
setTacState(createEmpty);
const tacInfo = await API.graphql({
query: xxxx,
variables: { xxxx },
});
setTacState(
createWithContent(
createFromText(xxxx)
)
);
} catch (error) {
console.log("error occured on fetch version :", error);
}
},
[xxx, createWithContent, createFromText, createEmpty]
);

useEffect(() => {
getTacInfo();
return () => {
setTacState(null);
};
}, [getTacInfo]);

return (
<>

{tacState && (
<Editor
editorState={tacState}
toolbarClassName="toolbarClassName"
wrapperClassName="wrapperClassName"
editorClassName="editorClassName"
readOnly={"true"}
/>
)}

<Link
className="btn secondary marginTop-20 marginLeft-20"
to={{
pathname: "/",
}}>
{" "}
Cancel{" "}

</>
);
};
export default TDetails;

Errors;

[enzoneyra]

any solution?