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 ponent, 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.

Here are two screenshots.

How can I solve this?

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 ponent, 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.

Here are two screenshots.

How can I solve this?

• javascript
• node.js
• reactjs
• redux-form

• 1 Please include all relevant code and error messages in text format in the question instead of linking to external resources. – Tholle Commented Aug 3, 2018 at 21:05

3 Answers 3

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 mon input element content attributes, IDL attributes, and methods apply to the element: autoplete, 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/en-US/docs/Web/HTML/Element/Input

I'm missing where you set the prop fields. for the PostsNew ponent. When I look at your code, I don't see you provide any props to it, as you render the ponent without props when someone visits the posts/new route.

export default(
    <Route path="/" ponent={App} >
        <IndexRoute ponent={PostsIndex} />
        <Route path="posts/new" ponent={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} />
//bees
<input type="text" id="title defaultValue="Enter title" />

Points to fix:

(1) Provide PostsNew ponent 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.

This is because you are using the old version of redux-form with the new version of react with are not patible 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:

https://github./erikras/redux-form/issues/1249

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 ponent (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:

• https://redux-form./8.2.2/docs/migrationguide.md/
• https://redux-form./6.6.2/docs/faq/howtoconnect.md/