I have run into a TS2322 error while passing the method searchForBooks as props to SearchBooks component from the JumboBooks component:
JumboBooks.tsx (Parent)
import { RouteComponentProps } from 'react-router';
...
export class JumboBooks extends React.Component<RouteComponentProps<{}>, {}> {
...
searchForBooks(searchFilters: SearchParameters){...}
...
public render() {
return (
<div>
<SearchBooks searchForBooks={this.searchForBooks} />
...
}
SearchBooks.tsx
import { RouteComponentProps } from 'react-router';
...
interface IBookSearchProps {
searchForBooks:(filters: SearchParameters)=> void;
}
export class SearchBooks extends React.Component<IBookSearchProps & RouteComponentProps<{}>, {}> {
isearchForBooks() {
var filters: SearchParameters = {
// fill up parameters based on ref values
};
this.props.searchForBooks(filters);
}
...
}
export interface SearchParameters
{
...
}
Error:
Error:
TS2322: Type '{ searchForBooks: (searchFilters: SearchParameters) => void; }' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{ children?: ReactNode; }>…'.
Type '{ searchForBooks: (searchFilters: SearchParameters) => void; }' is not assignable to type 'Readonly>'.
Property 'match' is missing in type '{ searchForBooks: (searchFilters: SearchParameters) => void; }'.
Best Answer
Only your
JumboBooks
is actually being using as a RouteComponent (being passed as<Route component={JumboBooks} />
), so only it will automatically receive thematch
prop. Any descendants ofJumboBooks
that you want to have access tomatch
you will have to pass in like a normal old prop:if you don't actually need the
match
prop, delete theRouteComponentProps<{}>
from yourSearchBooks
component: