I'm working on a post section on my webapp and I decided to use react-draft-wysiwyg. Everything was working fine up to the point where I set editorState={editorState}. I'm not sure exactly what's causing this issue (I'm really new to TS). I'm getting this error:
Type '{ editorState: EditorState; onEditorStatChange: (editorState: any) => void; }' is not assignable to type 'IntrinsicAttributes & { children?: ReactNode; }'. Property 'editorState' does not exist on type 'IntrinsicAttributes & { children?: ReactNode; }'.
and on local host i'm getting
TypeError: Cannot read properties of undefined (reading 'createWithText')
import dynamic from 'next/dynamic';
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css';
import { EditorState } from 'draft-js';
const Editor = dynamic(
() => import('react-draft-wysiwyg').then(({ Editor }) => Editor),
{ ssr: false }
);
const [editorState, setEditorState] = useState(EditorState.createEmpty);
return (
<>
<TitleBox>
<label>
Title <br />
<input
placeholder="Title..."
onChange={(event) => {
setTitle(event.target.value);
}}
/>
</label>
</TitleBox>
<PostBox>
<Editor
editorState={editorState}
onEditorStatChange={onEditorStateChange}
/>
{/* <label>
Post <br />
<textarea
placeholder="Post Body..."
onChange={(event) => {
setPostText(event.target.value);
}}
/>
</label> */}
</PostBox>
<Button onClick={createPost}>Submit Post</Button>
</>
);
The onEditorStateChange event is misspelt.
should be: