CODEWITHSUNDEEP
reactjstypescriptredux-formtypescript-typingsreact-redux-form
Shawn
Shawn

Reputation: 2435

Typescript error when passing props to component that is a redux-form component

I am having the following issue when trying to export a form component using redux-form. I am using typescript 2.9.2 and redux-form 7.3.0. Does anybody know how to change my typings to work with this?

[ts]
Argument of type 'typeof ForgotPasswordForm' is not assignable to parameter of type 'ComponentType<IForgotPasswordFormProps & InjectedFormProps<Readonly<IForgotPasswordFormFields>, I...'.
  Type 'typeof ForgotPasswordForm' is not assignable to type 'StatelessComponent<IForgotPasswordFormProps & InjectedFormProps<Readonly<IForgotPasswordFormField...'.
    Type 'typeof ForgotPasswordForm' provides no match for the signature '(props: IForgotPasswordFormProps & InjectedFormProps<Readonly<IForgotPasswordFormFields>, IForgotPasswordFormProps> & { children?: ReactNode; }, context?: any): ReactElement<any>'.

So here I have a form component like so, I have removed a lot of code from the component to make it more readable but left the interfaces the same:

class ForgotPasswordForm extends Component<IForgotPasswordFormProps> {
    render() {
        return (
            <form>
                <Row center='xs'>
                        <Field name='username'
                               component={TextField}
                               label='Username'
                               className={styles.loginFormInput}
                               spellCheck={false}
                               onChange={this.clearForgotPasswordError}
                               validate={[required]}
                               autoFocus/>
                </Row>
            </form>
        );
    }
}

type IForgotPasswordFormFields = {
    username: string;
};

interface IForgotPasswordFormProps extends InjectedFormProps {
    sendForgotPasswordEmail: (username: string) => Promise<ForgotPasswordResponse>;
    loading: boolean | null;
    toggleForgotPasswordForm: () => void | null;
}

const reduxForgotPasswordForm = reduxForm<Readonly<IForgotPasswordFormFields>, IForgotPasswordFormProps>({
    form: 'ForgotPasswordForm'
})(ForgotPasswordForm) //<=== Error is showing here;

export default reduxForgotPasswordForm;

The component is being used in the parent like so:

<ForgotPasswordForm toggleForgotPasswordForm={this.toggleForgotPasswordForm}/>

Upvotes: 1

Views: 651

Answers (1)

Shawn
Shawn

Reputation: 2435

For anybody who has this same type of issue, this is the solution I came up with to get typings to work with a redux-form component that you are passing props to. So in the above question I changed to reduxForm higher order component typing to look like so:

const reduxForgotPasswordForm = reduxForm<Readonly<IForgotPasswordFormData>, IPassedForgotPasswordProps>({
    form: 'ForgotPasswordForm'
})(ForgotPasswordForm);

And had these following interfaces:

IForgotPasswordFormData {
    username: string;
}

IPassedForgotPasswordFormProps{
    toggleForgotPasswordForm: () => void;
}

And then the key was that in the IForgotPasswordFormProps that is used when creating the class and extending Component, I had to have the following interface extend InjectedProps of those types like this: 

class ForgotPasswordForm extends Component<IForgotPasswordFormProps>

with IForgotPasswordFormProps being:

interface IForgotPasswordFormProps extends InjectedFormProps<Readonly<IFormData>, IPassedForgotPasswordProps> {
    toggleForgotPasswordForm: () => void | null;
}

Upvotes: 1

Related Questions