Not assignable to type IntrinsicAttributes & IntrinsicClassAttributes React.js

Question

I have been working with react.js for a while. Recently, i start seeing an error like:

Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes'

I don't know what's going on. I googled about it and what i found other's saying about is that it is an issue with props. Here is a scenario that i saw. Rather than:

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

the following work's fine:

<MyComponent {...props} />

I want to understand this thing that what is IntrinsicAttributes and IntrinsicClassAttributes in react. Can you please provide me a detailed answer that why such type of error occures and what are these really?

Answer 1

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

Answer 2

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.