2

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)}
 />
Luke
  • 63
  • 1
  • 7
  • 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 Jul 27 '20 at 19:59
  • Sure @AlexeyKorkoza here is a Sandbox: https://codesandbox.io/s/interesting-chatterjee-o5x41 – Luke Jul 27 '20 at 20:08
  • @AlexeyKorkoza also edited again just now. – Luke Jul 27 '20 at 20:41

2 Answers2

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;
Bill
  • 17,872
  • 19
  • 83
  • 131
  • 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: https://codesandbox.io/s/amazing-kapitsa-2fwjd – Luke Jul 28 '20 at 18:55
  • 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! – Luke Aug 01 '20 at 11:20
0

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;
Manik
  • 11
  • 3