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

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:

• Cannot read property ‘pathname’ of undefined in React
• Property ‘value’ does not exist on type HTMLElement
• Property ‘value’ does not exist on type EventTarget

Nathaniel Kirk

Hi, my name’s Nathaniel Kirk. I’m interested in learning and sharing knowledge about programming languages. My strengths are C, C++, Python, HTML, CSS, Javascript, and Reactjs. If you have difficulty with them, don’t worry. I’m here to support you.

---

Name of the university: PTIT
Major: IT
Programming Languages: C, C++, Python, HTML, CSS, Javascript, Reactjs