Search code examples
javascriptreactjsmaterial-uiredux-formreact-forwardref

Failed prop type: Invalid prop `component` supplied to `Field`. after installing mui v4

Migrating to Material ui v4 and got this error

Failed prop type: Invalid prop component supplied to Field. in Field (created by TextField)

Which points to the redux form field component

export const TextField = props => (
    <Field
        component={renderTextField}
        {...props}
    />
);

I believe it has to do with React.forwardRef when looking at the docs

Tried

1.)

Redux form points to forwardRef : boolean [optional] when added, the issue persits

 <Field
     component={renderTextField}
     forwardRef={true}
     {...props}
  />

2.)

component= {React.forwardRef((props, ref) => <renderTextField innerRef={ref} {...props} />)}

which is invalid.

Solution

  • You must use the "latest" redux form package, the one which has React.forwardRef implementation.

    Install 8+

    "redux-form": "^8.3.6"