'React does not recognize the `initialValue` prop on a DOM element
Warning: React does not recognize the `initialValue` prop on a DOM element. If you intentionally want it to appear in the DOM as a custom attribute, spell it as lowercase `initialvalue` instead. If you accidentally passed it from a parent component, remove it from the DOM element.
in input (created by PostsNew)
in div (created by PostsNew)
in form (created by PostsNew)
in PostsNew (created by ReduxForm(PostsNew))
in ReduxForm(PostsNew) (created by Connect(ReduxForm(PostsNew)))
in Connect(ReduxForm(PostsNew)) (created by ReduxFormConnector(PostsNew))
in ReduxFormConnector(PostsNew) (created by ConnectedForm)
in ConnectedForm (created by RouterContext)
in div (created by App)
in App (created by RouterContext)
in RouterContext (created by Router)
in Router
I'm receiving the above error when I add {...title} or {...categories} or {...content} to the input tag.
I'm referring to this line in my code.
https://github.com/justlearncode/REACT-REDUX-FORM/blob/master/src/components/posts_new.js#L25
Here are two screenshots.
If it's helpful, you can download my project and test it at the link below. https://github.com/justlearncode/REACT-REDUX-FORM
How can I solve this? Any help in the right direction is appreciated.
Solution 1:[1]
It looks like you are applying attributes to an <input> which are not allowed/ recognized. In this case initialValue. Here's an extract of the HTML specification. (link)
The following common input element content attributes, IDL attributes, and methods apply to the element: autocomplete, dirname, list, maxlength, minlength, pattern, placeholder, readonly, required, and size content attributes; list, selectionStart, selectionEnd, selectionDirection, and value IDL attributes; select(), setRangeText(), and setSelectionRange() methods.
See also the below link for a list of the available input types.
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Input
I'm missing where you set the prop fields. for the PostsNew component. When I look at your code, I don't see you provide any props to it, as you render the component without props when someone visits the posts/new route.
export default(
<Route path="/" component={App} >
<IndexRoute component={PostsIndex} />
<Route path="posts/new" component={PostsNew} />
</Route>
);
Another issue I see in your code is that you destructure the title variable. I'm unsure if this is intentional if so, you have to ensure title, categories, and content, only contain valid attributes from the HTML specification. for example.
const title = {
defaultValue: 'Enter title',
type: 'text',
id: 'title'
}
<input {...title} />
//becomes
<input type="text" id="title defaultValue="Enter title" />
Points to fix:
(1) Provide PostsNew component with props. You can do this by using this route instead.
<Route path="posts/new" render={<PostsNew fields={fields} />} />
(2) Ensure only valid attributes of an input field are provided.
Solution 2:[2]
This is because you are using the old version of redux-form with the new version of react with are not compatible with the new API of react. Please consider to upgrade you redux-form. It will have the new API. You can find more in the issue here:
Solution 3:[3]
Migrating from redux-from 5 or lower to 6 or higher would be a big pain in neck, Since I can't find a way to map states and dispatch to props without using connect, and it's not that much effective as react-redux won't return a component (as I tried)... So I think downgrading your react would be a better choice
But if you choose to update then maybe these two links may help you:
Sources
This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.
Source: Stack Overflow
| Solution | Source |
|---|---|
| Solution 1 | Roy Scheffers |
| Solution 2 | Dat Tran |
| Solution 3 |