Typescript - how do I fix "Property children does not exist" error on the children prop of a non-Typescript React component?

Question

I have a parent component that is written in the tsx extension and a child component that is written in the 'jsx' extension:

Child.jsx (not the actual component but just an example)

const Child = props => {
    const { children } = props

    return (<a>{children}</a>)
}

Parent.tsx

const Parent = (props: IProps) => {
    return (
        <Child>This is my data</Child>
    )
}

However, I get a Typescript error on the Parent.tsx :

Property 'children' does not exist on type 'IntrinsicAttributes

Now, in a perfect world, I might refactor the Child.jsx to be a Typescript file and type the children prop as React.ReactNode but what if this is a legacy Child file that is incredibly complex and itself has children that need to refactored, etc.?

Is there any way to get over the Typescript error being emitted by the Parent?

Answer 1

React 18 stopped including implicit children prop. You need to add it explicitly.

https://solverfox.dev/writing/no-implicit-children/

We need to start submitting PRs to the various dependency projects (as I have done twice so far) to add the explicit children prop. Perhaps downgrade React version until that situation calms down?