jodit / jodit/jodit-react

Warning: React does not recognize the `formState` / `fieldState` prop on a DOM element.

Open
#148 15 comments 12 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
TypeScript
Stars
406
Forks
131
Avg merge
2h 32m
Merged PRs (30d)
2

Description

I want to integrate the JoditEditor with react-hook-forms like this:

import React from "react"
import Layout from "../components/Layout"
import { useForm, Controller } from "react-hook-form"
import { Button, Form } from "react-bootstrap"
import JoditEditor from "jodit-react"

function TextEdit({ create, slug }) {
  const { control, handleSubmit } = useForm()

  const onSubmit = (data) => console.log(data)

  const joditConfig = {
    readonly: false
  }

  return (
    <Layout title={create ? "Create new Text" : "Edit text"}>
      <Form onSubmit={handleSubmit(onSubmit)}>
        <Controller
          name="content"
          control={control}
          defaultValue={""}
          render={({ field }) => (
            <JoditEditor
              config={joditConfig}
              value={field.value}
              onChange={field.onChange}
              onBlur={field.onBlur}
              ref={field.ref}
            />
          )}
        />
        <Button type="submit">Submit</Button>
      </Form>
    </Layout>
  )
}

export default TextEdit

I'm getting these two warnings in the console:

Warning: React does not recognize the `formState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `formstate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at input
    at http://localhost:3000/static/js/vendors~main.chunk.js:41634:3
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:41716:3
    at Controller (http://localhost:3000/static/js/vendors~main.chunk.js:75236:35)
    at form
    at http://localhost:3000/static/js/vendors~main.chunk.js:41371:3
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:40230:3
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:44350:3
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:40415:3
    at Layout (http://localhost:3000/static/js/main.chunk.js:310:3)
    at TextEdit (http://localhost:3000/static/js/main.chunk.js:1499:3)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:88593:3)
    at Router
    at App

index.js:1 Warning: React does not recognize the `fieldState` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `fieldstate` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
    at input
    at http://localhost:3000/static/js/vendors~main.chunk.js:41634:3
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:41716:3
    at Controller (http://localhost:3000/static/js/vendors~main.chunk.js:75236:35)
    at form
    at http://localhost:3000/static/js/vendors~main.chunk.js:41371:3
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:40230:3
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:44350:3
    at div
    at http://localhost:3000/static/js/vendors~main.chunk.js:40415:3
    at Layout (http://localhost:3000/static/js/main.chunk.js:310:3)
    at TextEdit (http://localhost:3000/static/js/main.chunk.js:1499:3)
    at Route (http://localhost:3000/static/js/vendors~main.chunk.js:88593:3)
    at Router
    at App

I'm only getting this error on the JoditEditor, other fields work without a warning.

Contributor guide

No contributing guide indexed for this repository

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start by reproducing the reported JoditEditor integration with react-hook-form and inspect the wrapper entry point where Controller props are forwarded. Compare its handling with the other fields that do not warn; done means the formState and fieldState warnings no longer appear for this integration.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
38/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.