Property does not exist on type intrinsicattributes

The error “property does not exist on type ‘IntrinsicAttributes'” is a TypeScript error that occurs when you are trying to access a property on a component that does not exist.

IntrinsicAttributes is a generic type in TypeScript that represents the props (or attributes) of a JSX element. It is used when the specific props for a component are not defined.

To explain further, let’s consider an example. Suppose you have a custom React component called “Button” that accepts some props like “text” and “onClick”. So, you define the component as follows:

    
      import React from 'react';

      interface ButtonProps {
        text: string;
        onClick: () => void;
      }

      const Button: React.FC = ({ text, onClick }) => {
        return (
          
        );
      };

      export default Button;
    
  

Now, let’s say you are using this Button component in another component called “App”, and you mistakenly try to access a non-existing property “color” on the Button component:

    
      import React from 'react';
      import Button from './Button';

      const App: React.FC = () => {
        return (
          

My App

); }; export default App;

In this example, “color” is not a defined prop for the Button component. Hence, TypeScript will throw the error “property ‘color’ does not exist on type ‘IntrinsicAttributes & ButtonProps'”.

To fix this error, you should remove the invalid “color” prop from the Button component in the App component:

    
      import React from 'react';
      import Button from './Button';

      const App: React.FC = () => {
        return (
          

My App

); }; export default App;

Now, the error will be resolved because you are only passing the valid props to the Button component. Always make sure to pass valid props to components to avoid this error.

Leave a comment