Warning: React does not recognize the `formState` / `fieldState` prop on a DOM element.
Open
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
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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