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.