Getting "...'editorState' does not exist on type 'IntrincsicAttributes

518 views Asked by At

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>
    </>
  );
1

There are 1 answers

0
Robert Anderson On

The onEditorStateChange event is misspelt.

<Editor
  editorState={editorState}
  onEditorStatChange={onEditorStateChange}
/>

should be:

<Editor
  editorState={editorState}
  onEditorStateChange={onEditorStateChange}
/>