Typescript Property XXX does not exist on type IntrinsicAttributes IntrinsicClassAttributes

0 votes

I'm working on a project with Typescript, React and Redux (all running in Electron), and I've run into a problem when I'm including one class based component in another and trying to pass parameters between them. Loosely speaking, I've got the following structure for the container component:

class ContainerComponent extends React.Component<any,any> {
  ..
  render() {
    const { propToPass } = this.props;
    ...
    <ChildComponent propToPass={propToPass} />
    ...
  }
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ContainerComponent);

And the child component:

interface IChildComponentProps extends React.Props<any> {
  propToPass: any
}

class ChildComponent extends React.Component<IChildComponentProps, any> {
  ...
}

....
export default connect(mapStateToProps, mapDispatchToProps)(ChildComponent);

Obviously I'm only including the basics and there is much more to both of these classes but I'm still getting an error when I try and run what looks to me like valid code. The exact error that I'm getting:

TS2339: Property 'propToPass' does not exist on type 'IntrinsicAttributes & IntrinsicClassAttributes<Component<{}, ComponentState>> & Readonly<{ childr...'.

When I first encountered the error I thought it was because I wasn't passing in an interface defining my props, but I created that (as you can see above) and it still doesn't work. I'm wondering, is there something I'm missing?

When I exclude the ChildComponent prop from the code in the ContainerComponent, it renders just fine (aside from my ChildComponent not having a critical prop) but with it in the JSX Typescript refuses to compile it. I think it might have something to do with the connect wrapping, but the problems in that article occurred in the index.tsx file and were a problem with the provider, and I'm getting my problems elsewhere.

Jun 7, 2022 in TypeSript by Logan
• 2,140 points
49,417 views

1 answer to this question.