Typescript React Intl Redux form type mismatch

Question

I want to connect my form to Intl but I am struggling to understand the typescript error. If I change injectIntl<any>, the error disappears. Possibly, I need to pass something there but I don't know what. Could you please take a look what I am doing wrong, perhaps help me understand the error.

Thank you

Code:

import { injectIntl, InjectedIntlProps } from 'react-intl';
import { reduxForm, Field, InjectedFormProps } from 'redux-form';

interface PageProps extends InjectedIntlProps, InjectedFormProps {}

const Page = (props: PageProps): JSX.Element => {
  const { intl: { formatMessage } } = props;
  return (
    <div>
        <form>
             <Field
                    name="date"
                    type="text"
                    component="input"
                    id="date"
                    {...{
                        label: formatMessage({
                            id: '...',
                        }),
                    }}
                />
        </form>
    </div>
  );
};

export default injectIntl(
  reduxForm({
    form: "FormName",
  })(Page),
);

Error:

message: 'Argument of type 'DecoratedComponentClass<{}, Partial>>' is not assignable to parameter of type 'ComponentConstructor> & InjectedIntlProps>'. Type 'DecoratedComponentClass<{}, Partial>>' is not assignable to type 'StatelessComponent> & InjectedIntlProps>'. Type 'DecoratedComponentClass<{}, Partial>>' provides no match for the signature '(props: Partial> & InjectedIntlProps & { children?: ReactNode; }, context?: any): ReactElement | null'.'

fszlin · Accepted Answer · 2018-04-02 23:01:38Z

1

Try injectIntl on the Page.

export default reduxForm({
    form: "FormName",
})(injectIntl(Page));

answered Apr 2, 2018 at 23:01

fszlin

7998 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Typescript React Intl Redux form type mismatch

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related