Search code examples
reactjsredux-form

How to use custom component in redux-form?

In my redux-form app I have a Field that should be a custom component:

import Name from './NameComponent'
..

<Field
            name="boer"
            component={Name}
            type="text"
            placeholder="First Name"
/>

The component is NameComponent:

import React from 'react'
const Name= field => <div><input type="text">fill in here:</input></div>
export default Name;

When I run this CRA app I get this error, why? :

Uncaught Invariant Violation: input is a void element tag and must neither have `children` nor use `dangerouslySetInnerHTML`. Check the render method of Name.
Solution

  • Use 

    const Name = field => <input type="text" {...field.input} />

    Also I encourage you to learn this and this sections of Redux Form docs