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