Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Search> & Readonly<{ children?: ReactNode; }>

Question

I am very new to React and TypeScript. I am developing a web page in Visual Studio 2017 where I have a search component which I would like to use in my home component. But after importing search into my home component, I get a compile time error saying:

Type {} is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes<Search> & Readonly<{ children?: ReactNode; }>  
Type {} is not assignable to type Readonly<SearchForm>  
 Property 'suggestionList' is missing in type {}

Search Component code:

export class Search extends React.Component<SearchForm> { //SearchForm is a class with string and an object of another class as properties
constructor() {
    super();
}

Home component code:

   export class Home extends React.Component<RouteComponentProps<{}>, {}> 
   {
   return <div>
        < Search /> // <=Getting error at this line
   <div>
   }

If I remove RouteComponentProps<{}> from Home component, then I get an error in route.tsx file. I know, I must be doing something wrong or some silly mistake. I googled this but I am not getting any helpful answers. Can somebody tell me how do I solve this?

Answer 1

As @Tobías said, you are missing the required properties of Search component.

Giving all props a value will fix it:

<Search prop1={'string'} prop2={obj} />

Answer 2

If you would like to create functional component you can use generics in order to get rid of this error. Consider this example.

interface SearchProps {
  suggestionList: any
}

export const Search: React.FC<SearchProps> = ({suggestionList}): JSX.Element => {
   return <div>...</div>
}

Answer 3

You are missing required properties of Search component, the error shows suggestion List. You need something like:

<div>
  <Search suggestionList={...} />
</div>

(and maybe not only suggestionList is missing)

React.Component definition is:

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

where P defines components properties and S the state. You must pass to the component all requiered properties defined in P.

In your example, component properties type is SearchForm. Therefore you need to pass, at least, all required attributes of SearchForm.

Please refer to Define Props and State Types for a more complete explanation.