CODEWITHSUNDEEP
reactjstypescriptreact-routermaterial-uireact-router-dom
Akusas
Akusas

Reputation: 529

Typescript error when using withRouter(withStyles(styles)(ComponentName))

I'm creating an SPA using React with Typescript. I've been using the UI framework Material UI. I've run into an error now that I can't seem to figure out. This error runs across multiple files. I get the Typescript error TS2345:

Argument of type 'ComponentType<Pick<ComponentProps & StylesProps & RouteComponentProps<any, StaticContext, any>, "data" | "header" | "currency" | "history" | "location" | "match" | "staticContext" | "operation" | "matured"> & StyledComponentProps<...>>' is not assignable to parameter of type 'ComponentClass<Pick<ComponentProps & StylesProps & RouteComponentProps<any, StaticContext, any>, "data" | "header" | "currency" | "history" | "location" | "match" | "staticContext" | "operation" | "matured"> & StyledComponentProps<...>, any> | (ComponentClass<...> & FunctionComponent<...>)'.

I've tried a few searches, and a few solutions with adding in RouteComponentProps from react-router-dom. But they don't seem to work. I've noticed that if i remove the withStyles(styles)(ComponentName) from inside the withRouter, so I just have withRouter(ComponentName), then the error disappears.

Here's my code, removed unnecessary bits:

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from './ComponentName.style';
import theme from '../../common/theme';
import { StylesProps, RouterProps } from '../../common/types';
import { withRouter } from 'react-router-dom';

// Material UI imports

interface ComponentProps {
    currency: string;
    data: any;
    header: any;
    operation : any;
}

class ComponentName extends React.Component<ComponentProps & StylesProps & RouterProps> {
    render() {
        const { classes, currency, data, header, operation } = this.props;
        const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
        return (
            // Layout
        );
    }
}
export default withRouter(withStyles(styles)(IssuesList));

StylesProps is a type for the classes in className, and RouterProps is a type for RouteComponentProps from react-router-props

Upvotes: 0

Views: 1447

Answers (1)

Akusas
Akusas

Reputation: 529

I found a solution. If it's the best solution is debatable. I needed to wrap my whole component in the withRouter().

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from './ComponentName.style';
import theme from '../../common/theme';
import { StylesProps, RouterProps } from '../../common/types';
import { withRouter } from 'react-router-dom';

// Material UI imports

interface ComponentProps {
  currency: string;
  data: any;
  header: any;
  operation : any;
}

const ComponentName = withRouter(
  class ComponentName extends React.Component<ComponentProps & StylesProps & RouterProps> {
    render() {
      const { classes, currency, data, header, operation } = this.props;
      const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
      return (
        // Layout
      );
    }
  }
);
export default withStyles(styles)(IssuesList);

Another solution would be to wrap the withRouter around only the Component:

import * as React from 'react';
import { withStyles } from '@material-ui/core/styles';
import styles from './ComponentName.style';
import theme from '../../common/theme';
import { StylesProps, RouterProps } from '../../common/types';
import { withRouter } from 'react-router-dom';

// Material UI imports

interface ComponentProps {
  currency: string;
  data: any;
  header: any;
  operation : any;
}

class ComponentName extends React.Component<ComponentProps & StylesProps & RouterProps> {
  render() {
    const { classes, currency, data, header, operation } = this.props;
    const options = { year: 'numeric', month: '2-digit', day: '2-digit' };
    return (
      // Layout
    );
  }
}
export default withStyles(styles)(withRouter(IssuesList));

Upvotes: 1

Related Questions