Sometimes, we want to fix the “Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes” with TypeScript and React.

In this article, we’ll look at how to fix the “Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes” with TypeScript and React.

How to fix the “Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes” with TypeScript and React?

To fix the “Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes” with TypeScript and React, we should set the props’ data types when we’re defining our component.

For instance, we write

interface IMyProps {
  myValue: boolean;
}

const MyComponent: React.FC<IMyProps> = (props: IMyProps) => {
  //  ...
};

export default MyComponent;

to set the prop‘s data type to IMyProps.

Then props must have the IMyProps data type so the myValue prop must be present and set to a boolean.

Conclusion

To fix the “Type ‘{}’ is not assignable to type ‘IntrinsicAttributes & IntrinsicClassAttributes” with TypeScript and React, we should set the props’ data types when we’re defining our component.