Как типизировать render контроллера react-hook-form?

Question

[Александр Иванов]

Не могу разобраться с типизацией render в react-hook-form. пытаюсь сделать текстовый редактор, подключаю tiptap к react-hook-form. но показывается ошибка типизации в контроллере

компонент формы

'use client'

import { FC } from "react";

import styles from './editprofile.module.scss'
import Heading from "@/components/ui/heading/Heading";
import Button from "@/components/ui/form-elements/button/Button";
import Field from "@/components/ui/form-elements/field/Field";
import { Controller, ControllerFieldState, ControllerRenderProps, useForm, UseFormStateReturn } from "react-hook-form";
import { Skeleton } from "@/components/ui/skeleton";
import TextEditor from "@/components/ui/form-elements/text-editor/TextEditor";
import { UpdCandidatFormData } from "@/types/candidat";
import { useCandidatProfile } from "@/hooks/useCandidatProfile";
import DatePicker from "@/components/ui/form-elements/datepicker/Datapicker";

const EditProfile:FC = () => {
    const {profile, onSubmit, isLoading} = useCandidatProfile()
    const {
        register,
        handleSubmit,
        formState: {errors},
        control,
        setValue,
        getValues
    } = useForm<UpdCandidatFormData>({
        mode: 'onChange',
        values: {
            about_my: profile?.agencydata?.about_my || ''
        }
    })
    
    return <div className='px-6'>
        <div className={styles.wrapper}>
            <Heading className={styles.heading}>Complite the registration</Heading>
            <form onSubmit={handleSubmit(onSubmit)} className=''>
                {isLoading ? (
                    <Skeleton />
                ) : (
                    <>
                        <div className=''>
                            <Controller
                                name="about_my"
                                control={control}
                                ren<img src="https://habrastorage.org/webt/66/ee/e6/66eee686a60c7890797976.png" alt="image"/>der={({ field }) => {
                                    <TextEditor {...field} />
                                }}
                                rules={{required: 'Write about you'}}
                            />
                        </div>
                        <Button>Save</Button>
                    </>
                )}
            </form>
        </div>
    </div>
}

export default EditProfile

export interface ITextEditor {
    onChange: (richText: string) => void
    value: string
}

компонент tiptap

"use client"

import { useEditor, EditorContent, type Editor } from "@tiptap/react"
import StarterKit from "@tiptap/starter-kit"
import { Bold, Strikethrough, Italic, List, ListOrdered } from "lucide-react"
import { Toggle } from "@/components/ui/toggle"
import { Separator } from "@/components/ui/separator"
import { ITextEditor } from "../form.interface"
import { FC } from "react"

const TextEditor:FC<ITextEditor> = ({value, onChange}) => {
  const editor = useEditor({
    editorProps: {
      attributes: {
        class:
          "min-h-[150px] max-h-[150px] w-full rounded-md rounded-br-none rounded-bl-none border border-input bg-transparent px-3 py-2 border-b-0 text-sm ring-offset-background placeholder:text-muted-foreground focus-visible:outline-none disabled:cursor-not-allowed disabled:opacity-50 overflow-auto",
      },
    },
    extensions: [
      StarterKit.configure({
        orderedList: {
          HTMLAttributes: {
            class: "list-decimal pl-4",
          },
        },
        bulletList: {
          HTMLAttributes: {
            class: "list-disc pl-4",
          },
        },
      }),
    ],
    content: value, // Set the initial content with the provided value
    onUpdate: ({ editor }) => {
      onChange(editor.getHTML()); // Call the onChange callback with the updated HTML content
    },
  });

  return (
    <>
      <EditorContent editor={editor} />
      {editor ? <RichTextEditorToolbar editor={editor} /> : null}
    </>
  );
};

const RichTextEditorToolbar = ({ editor }: { editor: Editor }) => {
  return (
    <div className="border border-input bg-transparent rounded-br-md rounded-bl-md p-1 flex flex-row items-center gap-1">
      <Toggle
        size="sm"
        pressed={editor.isActive("bold")}
        onPressedChange={() => editor.chain().focus().toggleBold().run()}
      >
        <Bold className="h-4 w-4" />
      </Toggle>
      <Toggle
        size="sm"
        pressed={editor.isActive("italic")}
        onPressedChange={() => editor.chain().focus().toggleItalic().run()}
      >
        <Italic className="h-4 w-4" />
      </Toggle>
      <Toggle
        size="sm"
        pressed={editor.isActive("strike")}
        onPressedChange={() => editor.chain().focus().toggleStrike().run()}
      >
        <Strikethrough className="h-4 w-4" />
      </Toggle>
      <Separator orientation="vertical" className="w-[1px] h-8" />
      <Toggle
        size="sm"
        pressed={editor.isActive("bulletList")}
        onPressedChange={() => editor.chain().focus().toggleBulletList().run()}
      >
        <List className="h-4 w-4" />
      </Toggle>
      <Toggle
        size="sm"
        pressed={editor.isActive("orderedList")}
        onPressedChange={() => editor.chain().focus().toggleOrderedList().run()}
      >
        <ListOrdered className="h-4 w-4" />
      </Toggle>
    </div>
  );
};

export default TextEditor;

скрин ошибки

Answer 1

[historydev]

Плохо начинаешь, раз читать не научился.

Верни компонент:

render={({field}) => <TextEditor {...field}/>}
// или
render={({field}) => {
return <TextEditor {...field}/>;
}

Answer 2

[Данила]

У вас внутри render={({ field }) => { }} отсутствует явный return, о чём черным по белому сказано в тексте ошибки...

<Controller
  name="about_my"
  control={control}
  render={({ field }) => (
    <TextEditor {...field} />
  )}
  rules={{ required: 'Write about you' }}
/>