Reactjs – Property does not exist on type ‘IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }> …’

So after reading through some related answers (specifically this one and this one and looking at @basarat's answer to the question, I managed to find something that works for me. It looks (to my relatively new React eyes) like Connect was not supplying an explicit interface to the container component, so it was confused by the prop that it was trying to pass.

So the container component stayed the same, but the child component changed a bit:

interface IChildComponentProps extends React.Props<any> {
  ... (other props needed by component)
}

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

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

....
export default connect<{}, {}, PassedProps>(mapStateToProps, mapDispatchToProps)    (ChildComponent);

The above managed to work for me. Passing explicitly the props that the component is expecting from the container seemed to work and both components rendered properly.

NOTE: I know this is a very simplistic answer and I'm not exactly sure WHY this works, so if a more experienced React ninja wants to drop some knowledge on this answer I'd be happy to amend it.

The Component is defined like so:

interface Component<P = {}, S = {}> extends ComponentLifecycle<P, S> { }

Meaning that the default type for the state (and props) is: {}.
If you want your component to have value in the state then you need to define it like this:

class App extends React.Component<{}, { value: string }> {
    ...
}

Or:

type MyProps = { ... };
type MyState = { value: string };
class App extends React.Component<MyProps, MyState> {
    ...
}