Using custom props with a Redux form in Typescript

custom-props.tsx

import * as React from 'react';
import {
  Field as FormField,
  InjectedFormProps,
  reduxForm,
} from 'redux-form';

interface CustomProps {
  customText: string;
}

class FormComponent extends React.Component<CustomProps & InjectedFormProps<{}, CustomProps>> {
  render() {
    const { handleSubmit, customText } = this.props;

    return (
      <form onSubmit={handleSubmit}>
        <div>
          <p>{customText}</p>
        </div>
      </form>
    );
  }
}

export const Form = reduxForm<{}, CustomProps>({
  form: 'form',
})(FormComponent);

🎉

Thank you!

excellent!

Oh man this is a life saver! Thank you!

Thank you so much!

awesome!

Yes, thanks tremendously!!! But could someone please explain (or point me toward an external explanation of) WHY this works (and/or why this is the ONLY way it works out of the numerous ones I've been trying)?

I am trying to wrap my head around <CustomProps & InjectedFormProps<{}, CustomProps>> and utterly failing...

Thank you!!!

thank you

thanks mate! :)

Thanks a lot!!!

Keyword: InjectedFormProps

Here is another same solution using InjectedFormProps with withStyles in typescript

import {
  Field,
  reduxForm,
} from 'redux-form/immutable';
import { InjectedFormProps } from 'redux-form';

const styles = (theme: Theme) => createStyles({
})

interface Props extends InjectedFormProps, WithStyles<typeof styles> {
}

interface State {
}

class YourComponent extends React.Component<Props, State>{
}

export default reduxForm({
})(withStyles(styles)(YourComponent));

Lifesaver!

Thanks a lot! Saved my day )

Thank you!!

That's awesome. Thanks. :)

Thanks, dude. this should be added into the official document.

that help me remove another // @ts-ignore
thanks

dude you're a genius!

stared!

Thank you buddy,preety hard task.One more star (Y).Cheers.

Has anyone converted this to a functional component?

omg, thx!!

thank you very much

This is still paying dividends! Helped me today, thanks!