Typescript+React+Redux+reactrouter:“property does not exist on type IntrinsicAttributes & IntrinsicClassAttributes” passing props from parent to child

Question

I'm working on a project that involves Typescript, React, Redux & react-router. When I try to pass props from a ParentComponent to a Childcomponent that is connected to Redux, typescript throws the following error at me:

Error:(20, 17) TS2339: Property 'exampleProp' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes, never>, any, any>> & Readonly<{ children?: ReactNode; }> & Readonly<...>'.

The child-component looks like this:

interface ChildComponentProps {
    user: UserData;
}

interface PropsToPass {
    exampleProp: string;
}

class ChildComponent extends React.Component<ChildComponentProps & PropsToPass, any> {
    constructor(props: ChildComponentProps & PropsToPass) {
        super(props);
    }

    render() {
        return (
            <div>
                Content
            </div>
        );
    }
}

const mapStateToProps = (state: ApplicationState) => ({
    user: state.authentication.user
});

const mapDispatchToProps = (dispatch: Function) => ({
});

export default withRouter(connect<{}, {}, PropsToPass>(mapStateToProps, mapDispatchToProps)(ChildComponent) as any);

The parent-component looks like this:

interface ParentComponentProps  {

}

class ParentComponent extends React.Component<ParentComponentProps, any> {
    constructor(props: ParentComponentProps) {
        super(props);
    }

    render() {
        return (
            <ChildComponent
                exampleProp="Test" // This line is highlighted as being problematic
            />
        );
    }
}

const mapStateToProps = (state: ApplicationState) => ({
});

const mapDispatchToProps = (dispatch: Function) => ({
});

export default connect(mapStateToProps, mapDispatchToProps)(ParentComponent);

My editor highlights the line that passes "test" as the value of exaampleProp to the child-component. I have looked at this post in order to solve my problem, but unfortunately, the proposed solution is not working for me. I think it has something to do with the fact that I export my child-component with the withRouter function. I am not sure what I am doing wrong here.

Any help would be greatly appreciated.

Answer 1

I managed to fix the issue, even though I don't quite understand yet why exactly the issue was fixed so if anyone understands, feel free to provide some more information as to why this works.

All I did was change the last line from the child-component from:

export default withRouter(connect<{}, {}, PropsToPass>(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent) as any);

to

export default withRouter<PropsToPass & RouteComponentProps>(connect<{}, {}, PropsToPass>(
  mapStateToProps,
  mapDispatchToProps
)(ChildComponent) as any);