Reactjs and typescript error TS2322: Type is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes

reactjstypescript

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 the match prop. Any descendants of JumboBooks that you want to have access to match you will have to pass in like a normal old prop:

export class JumboBooks extends React.Component<RouteComponentProps<{}>, {}> {
  public render() {
    return (
      <div>
        <SearchBooks
          match={this.props.match}
          searchForBooks={this.searchForBooks}
        />
      </div>
    );
  }
}

if you don't actually need the match prop, delete the RouteComponentProps<{}> from your SearchBooks component:

export class SearchBooks extends React.Component<IBookSearchProps, {}> {
Related Topic