17913

Type '{}' is not assignable to type 'IntrinsicAttributes & DropdownProps & Pr

Question:

I am using React on Rails | Webpackaer | typescript: "^2.8.1".

I have a High-Order Component, which takes a components and injects few props in it, and return it:

export type HCProps = { isValid: boolean, };

Then I have a component, which gets injected props from a High-Order Component:

import injector, { HCProps } from './HCComponent'; type Props = {}; const LocalComponent: React.SFC<Props & HCProps> = ({ isValid }) => ( ); export default injector(LocalComponent);

Here LocalComponent does not take any props like DOM attributes while rendering it as component, but the props are injected by the HCComponent:

<LocalComponent />

This gives me error:

Type '{}' is not assignable to type 'IntrinsicAttributes & HCProps & Props & { children?: ReactNode; }'. Type '{}' is not assignable to type 'HCProps'. Property 'isValid' is missing in type '{}'.

Any idea why this is happening? I am new to typescript.

Answer1:

I assume you are making a mistake when saying

<blockquote>

LocalComponent does not accepts any props while rendering it

</blockquote>

Probably, you are rendering the default exported component injector(LocalComponent)

In that case, you are using a component whatever injector gave you. There should be a generic type in injector which you should use something like

injector<HCProps>(LocalComponent)

Recommend

  • Invoke SQL Script Wizard programmatically
  • How to get value from powershell script into C# variable?
  • How to handle props injected by HOC in React with Typescript?
  • Can't remove inline event handler in chrome
  • How to test method of JavaFX controller?
  • How to “remove”/“change” some require(…) calls when using browserify?
  • Passing unspecialized template as a template parameter
  • springboot + webpack dev server, does not change localhost bundle file after rebuilding
  • Zend Framework 2, Module Redirect
  • Thrust filter by key value
  • Load 24 bit TGA
  • IDX10503: Signature validation failed
  • Pointer vs Reference difference when passing Eigen objects as arguments
  • stop execution in Custom validator if it false
  • why my app based on boost::asio didn't accept new connection
  • Opaque reference instead of PImpl. Is it possible?
  • Delphi: Where is the shortcut that started the application? [duplicate]
  • Is there a parser equivalent of 'fragment' marking in ANTLR4?
  • How do I mock an exported typescript function in a jasmine test?
  • Invalid Date on validation Date of js
  • How can I enlarge video fullscreen without the affected interface project in as3?
  • C: Incompatible pointer type initializing
  • How can I extract results of aggregate queries in slick?
  • OOP Javascript - Is “get property” method necessary?
  • Typescript - Unable to get 'import' statement to function
  • Disabling Alt-F4 on a Win Forms NotifyIcon
  • PHP - How to update data to MySQL when click a radio button
  • AES padding and writing the ciphertext to a disk file
  • VS2008 Enable C++ Exception with SEH
  • Updating server-side rendering client-side
  • Return words with double consecutive letters
  • Python: how to group similar lists together in a list of lists?
  • How can I get HTML syntax highlighting in my editor for CakePHP?
  • Angular 2 constructor injection vs direct access
  • FormattedException instead of throw new Exception(string.Format(…)) in .NET
  • How do I configure my settings file to work with unit tests?
  • IndexOutOfRangeException on multidimensional array despite using GetLength check
  • Bitwise OR returns boolean when one of operands is nil
  • Busy indicator not showing up in wpf window [duplicate]
  • Binding checkboxes to object values in AngularJs