Not assignable to type IntrinsicAttributes & IntrinsicClassAttributes React.js

IntrinsicAttributes and IntrinsicClassAttributes

Interfaces implemented in TypeScript. They influence React and .jsxs interaction with the DOM elements, while working with Custom Components.

---

Underlying Principle

Lets assume you have

interface BarProps {
  foo: string;
}

class Bar extends React.Component<BarProps> {
  ...
}

If you try to render it

render() {
  return (
    <form>
      <Bar />
    </form>
  );
}

You'll get a similar error; since you're violating the interface typecheck. The Component should have a mandatory props i.e BarProps passed as an argument here.

Instead to make it work, you'll need to do something like..

render() {
  return (
    <form>
      <Bar foo="Jack Daniel's"/>
    </form>
  );
}

or you could remove it from the Component definition itself.

class Bar extends React.Component<> {
 ...
}

or make the foo optional..

interface BarProps{
  foo?: string;
}

---

Idea is to implement consistency.

In your case you're passing an unknown prop i.e action which has probably not been defined in your Component.

When you call your component like <MyComponent {...props} /> - it essentially means, import all available props.

When you explicitly call action prop like <MyComponent action={this.state.action} /> it throws the big fat error.

---

The mentioned errors are quite notorious. You can find more insights in this debugging guide for React and TypeScript which highlights these errors and share the possible fix.

You can read more about the implementation of IntrinsicAttributes and IntrinsicClassAttributes in this repository

Digging into Typescript's checker.ts it works likely because the block where the assignment to intrinsicAttributes is made is not needed to be executed, since there are no explicit JsxAttributes to compare for that component's invocation (isComparingJsxAttributes may be false). Try debugging Typescript's source code if you really need to find out if this is the case.

Just take an Example that Here typescript expects okay something is being passed only to be deconstructed when component will mount.

<MyComponent {...props} />

But here typescript takes this.state.action as undefined or maybe null because it is never sure there'll be a valid value passed.

<MyComponent action={this.state.action} />

Even if you have got the actions prop's type right. it still dosent know whether it has value or not hance see it as {} which is an empty object and cant be assigned to action.