Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Missing Properties from Type that shouldn't have to be passed manually to child component

In my child component I am defining the Props interface and include it in the React.Component.

These Props are then required to be passed to the child component from the parent component. So far so good, this all makes sense..

However when I extend the Props interface with i.e. RouteComponentProps from react-router Typescript also requires me to pass 'history, location, match', which I don't think I am supposed to pass manually...

I don't think it is related specifically to RouteComponentProps, as in certain cases I run into the same error with MapDispatchToProps and the PropsFromDispatch interface - a more elaborate explanation of this case here

Here is my code:

/Child.tsx

import * as React from 'react'
import { RouteComponentProps } from 'react-router';

interface Props extends RouteComponentProps { }

class Child extends React.Component<Props> {
    render() {
        return (
            <div>

            </div>
        )
    }
 }

export default Child;

/Parent.tsx

import * as React from 'react'
import Child from './Child';

export default class Parent extends React.Component {
    render() {
        return (
            <div>
                <Child />
             </div>
        )
    }
}

Error in /Parent.tsx:

<Child/>

Type '{}' is missing the following properties from type 
'Readonly<Props>': history, location, match - ts(2739)

Typescript and React versions:

"typescript": "^3.2.1", "react": "^16.6.3", "@types/react": "^16.7.13"

Thanks for any advice!

like image 212
Leon vdb Avatar asked Jan 03 '19 10:01

Leon vdb


2 Answers

So the problem is being caused by the Props which are marked as required in the RouteComponentProps class.

As you workaround you need to export your class as any, it will export your class without any type.

import * as React from 'react'
import { RouteComponentProps, withRouter } from 'react-router';

interface Props extends RouteComponentProps { }

class ChildImpl extends React.Component<Props> {
    render() {
        return (
            <div>

            </div>
        )
    }
 }
const Child = withRouter(ChildImpl as any);//Note: It is a workaround not an actual solution
export default Child;

And then in your parent:

import * as React from 'react'
import Child from './Child';
export default class Parent extends React.Component {
    render() {
        return (
            <div>
                <Child />
             </div>
        )
    }
}

No Props will be required to pass.

like image 64
Harish Soni Avatar answered Nov 15 '22 04:11

Harish Soni


I had the same issue, and the idea from @goediaz works fine to me, the only diference was I'm working with funcional components.

const MyFunciont: React.FC<IGlobalState> = (_RouteComponentProps, props) = {
//here your code

return (
    //html code
    )
}
like image 30
Raul Avatar answered Nov 15 '22 04:11

Raul