reduxForm 7.0.4 Unknown props `input`, `meta` on <input> tag. Remove these props from the element

Question

I'm setting up a form wizard as demonstrated here, but am getting the above error.

The component it finds objectionable is

<Field 
    name="Company"
    component={company => (
                            <div>
                            <input type="text" {...company} 
                             placeholder="company" />
                            {company.touched && company.error && <span>
                            {company.error}</span>}
                            </div>
    )}
/>

I understand that the tutorial is written for reduxForm 6.5.0 and I'm running 7.0.4, so what do I need to change to make this work?

Answer 1

Found it-the updated tutorial is here: https://redux-form.com/7.0.4/examples/wizard/

Essentially, we use a helper called renderField.js:

import React from 'react'

const renderField = ({ input, label, type, meta: { touched, error } }) =>
  <div>
    <label>
      {label}
    </label>
    <div>
      <input {...input} placeholder={label} type={type} />
      {touched &&
        error &&
        <span>
          {error}
        </span>}
    </div>
  </div>

export default renderField

Then, fields are rendered thusly:

<Field
        name="firstName"
        type="text"
        component={renderField}
        label="First Name"
      />