Property does not exist on type ‘JSX.IntrinsicElements’- How to fix it?

Property does not exist on type ‘JSX.IntrinsicElements’

If you don’t know how to fix the error “Property does not exist on type ‘JSX.IntrinsicElements’“, don’t worry. Learn more about it with the explanation and examples below.

The reason for this error

The Property does not exist on type ‘JSX.IntrinsicElements’ error is standard for someone new to JSX. This error is usually caused by some reasons, such as the developer not capitalizing the first letter of the component, or it can also be because the program is missing @types/react, @types/react-dom. So is there a way to fix it? Let’s see the solutions in the next part of the article

Some way to fix the error “property does not exist on type ‘JSX.IntrinsicElements’

An extended syntax known as JSX makes it simple for programmers to write HTML in React. Instead of regular JavaScript, React uses JSX for its template generation. Although you are not required to use JSX, this extension will make application development more straightforward. One of the benefits of using JSX in ReactJs is that it speeds up the compilation of code into JavaScript by optimizing it.

Code:

const h2Element = <h2>LearnShareIT</h2>;
ReactDOM.render(h2Element, document.getElementById('root'));

React components begin with an uppercase letter, whereas HTML tags always use lowercase names. This is an example about the way of an error:

Code:

var title = React.createClass({
  render: function () {
    return (
      <div>
        <h2>LearnShareIT</h2>
      </div>
    );
  },
});

export default class TitleList extends Component <any, any> {
  render() {
    return <title />;
  }
}

Output:

Property ‘title’ does not exist on type 'JSX.IntrinsicElements'

Capitalize the first letter of the class method

As mentioned above, the JSX syntax requires the user to capitalize the first letter of the class and the component. So maybe when you name it, you write it entirely in lowercase letters, so the above error appears.

Code:

var Title = React.createClass({
  render: function () {
    return (
      <div>
        <h2>LearnShareIT</h2>
      </div>
    );
  },
});
 
export default class TitleList extends Component <any, any> {
  render() {
    return <Title />;
  }
}

The above error has been fixed. If it is still not fixed, you can refer to the steps below to be able to fix the error you are experiencing.

Install @types/react-dom and @types/react method

If the above does not work for you, it may be because your program does not have the @types/react library and the @types/react-dom library installed. You can install these two libraries by running the terminal below.

Terminal:

npm i @types/react-dom
npm i @types/react

So you were able to fix the error that the error “Property does not exist on type ‘JSX.IntrinsicElements'”. I hope these methods will be helpful to you.

Summary

To summarize, this article shows you two ways to fix the “Property does not exist on type ‘JSX.IntrinsicElements’” error. You can capitalize the first letter of the class method or install @types/react-dom and @types/react methods to get the same result. Good luck for you!

Maybe you are interested:

Leave a Reply

Your email address will not be published. Required fields are marked *