DraftJS React-Hook-Form - submitting Editor as input

Question

I'm working with react-hook-form and I want to pass a rich text editor as input. I've included the RichText component below which is a standard Draft-js implementation, but when I click submit, I get "draft: undefined" instead of the text inside the editor

index.js import { useForm, Controller } from 'react-hook-form';

const JobPostForm = () => {

    const { register, handleSubmit, errors, control } = useForm({
    });

    return(
        <Controller
            as={<RichText />}
            name="draft"
            control={control}
        />
    )
}

RichText.js

<Editor
      customStyleMap={styleMap}
      ref={editor}
      editorState={editorState}
      onChange={editorState => setEditorState(editorState)}
 />

Benford

I think it's hard to reproduce your problem and then help you. Could you please create a demo using, for example, codesandbox and attach a link on the demo in your question? – Prenotion

Sure @AlexeyKorkoza here is a Sandbox: codesandbox.io/s/interesting-chatterjee-o5x41 – Benford

@AlexeyKorkoza also edited again just now. – Benford

Answer 1

https://react-hook-form.com/api#Controller

I have updated the doc to include draft-js example:

https://codesandbox.io/s/react-hook-form-v6-controller-qsd8r?file=/src/index.js

you should use Controller's render prop

import React from "react";
import { Controller } from "react-hook-form";
import { Editor } from "draft-js";

function RichText({ control }) {
  return (
    <div
      style={{
        border: "1px solid #ccc",
        minHeight: 30,
        padding: 10
      }}
    >
      <Controller
        name="DraftJS"
        control={control}
        render={({ value, onChange }) => (
          <Editor editorState={value} onChange={onChange} />
        )}
      />
    </div>
  );
}

export default RichText;

Meridith

Thanks Bill. I've updated the CodeSandBox to try and match this, but still getting an error "TypeError: Cannot read property 'isOnChange' of undefined". Here is the CodeSandbox: codesandbox.io/s/amazing-kapitsa-2fwjd – Benford

Just checking here if you can customise value, and onchange. In my CodeSandbox they're both custom and I'm having a hard time putting it in the format above. Thanks! – Benford

Answer 2

Just adding to the answer posted by @Bill I would recommend using onEditorStateChange as the prop for the Editor component instead of onChange. This is why you are getting this error

TypeError: Cannot read property 'isOnChange' of undefined".

Here is the updated code:

import React from "react";
import { Controller } from "react-hook-form";
import { Editor } from "draft-js";

function RichText({ control }) {
  return (
    <div
      style={{
        border: "1px solid #ccc",
        minHeight: 30,
        padding: 10
      }}
    >
      <Controller
        name="DraftJS"
        control={control}
        render={({ value, onChange }) => (
          <Editor editorState={value} onEditorStateChange={onChange} />
        )}
      />
    </div>
  );
}

export default RichText;

Alderson