How to use custom component in redux-form?

Question

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. 

Answer 1

Use

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

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