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)}
 />

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? — Aleksei Korkoza
– Aleksei Korkoza, Commented Jul 27, 2020 at 19:59
Sure @AlexeyKorkoza here is a Sandbox: codesandbox.io/s/interesting-chatterjee-o5x41 — Luke
– Luke, Commented Jul 27, 2020 at 20:08

Bill · Accepted Answer · 2020-07-28 04:58:41Z

2

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;

answered Jul 28, 2020 at 4:58

Bill

19.5k21 gold badges89 silver badges135 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Luke Over a year ago

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

Luke Over a year ago

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!

Manik · Accepted Answer · 2020-12-16 11:46:55Z

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;

Collectives™ on Stack Overflow

DraftJS React-Hook-Form - submitting Editor as input

2 Answers 2

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related