title: Type 'xxx' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more. TS2605
body: <p>I'm receiving the following error when trying to run my react app:</p>
  
  <blockquote>
    <p>D:/React/my-components/src/App.tsx
    TypeScript error in D:/React/my-components/src/App.tsx(23,4):
    JSX element type 'Confirm' is not a constructor function for JSX elements.
      Type 'Confirm' is missing the following properties from type 'ElementClass': context, setState, forceUpdate, props, and 2 more.  TS2605</p>
  </blockquote>
  
  <pre><code>21 |         &lt;/a&gt;
  22 |       &lt;/header&gt;
  23 |      &lt;Confirm /&gt;
     |      ^
  24 |     &lt;/div&gt;
  25 |   );
  26 | }
  </code></pre>
  
  <p>Here is my Confirm component code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import * as React from "react";
  
  class Confirm extends React.Component{
    render(){
       return (
        &lt;div className="confirm-wrapper confirm-visible"&gt;
     &lt;div className="confirm-container"&gt;
     &lt;div className="confirm-title-container"&gt;
     &lt;span&gt;This is where our title should go&lt;/span&gt;
     &lt;/div&gt;
     &lt;div className="confirm-content-container"&gt;
     &lt;p&gt;This is where our content should go&lt;/p&gt;
     &lt;/div&gt;
     &lt;div className="confirm-buttons-container"&gt;
     &lt;button className="confirm-cancel"&gt;Cancel&lt;/button&gt;
     &lt;button className="confirm-ok"&gt;Okay&lt;/button&gt;
     &lt;/div&gt;
     &lt;/div&gt;
     &lt;/div&gt;
       );
   }
   
  }
  export default Confirm;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And App.tsx code</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import React from 'react';
  import logo from './logo.svg';
  import './App.css';
  import Confirm from './Confirm';
  
  const App: React.FC = () =&gt; {
    return (
      &lt;div className="App"&gt;
        &lt;header className="App-header"&gt;
          &lt;img src={logo} className="App-logo" alt="logo" /&gt;
          &lt;p&gt;
            Edit &lt;code&gt;src/App.tsx&lt;/code&gt; and save to reload.
          &lt;/p&gt;
          &lt;a
            className="App-link"
            href="https://reactjs.org"
            target="_blank"
            rel="noopener noreferrer"
          &gt;
            Learn React
          &lt;/a&gt;
        &lt;/header&gt;
     &lt;Confirm /&gt;
      &lt;/div&gt;
    );
  }
  
  export default App;</code></pre>
  </div>
  </div>
  </p>
  
  <p>This is my package.json</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>{
    "name": "my-components",
    "version": "0.1.0",
    "private": true,
    "dependencies": {
      "@types/jest": "24.0.18",
      "@types/node": "12.7.8",
      "@types/react": "16.9.4",
      "@types/react-dom": "16.9.1",
      "react-scripts": "3.1.2",
      "typescript": "3.6.3"
    },
    "scripts": {
      "start": "react-scripts start",
      "build": "react-scripts build",
      "test": "react-scripts test",
      "eject": "react-scripts eject"
    },
    "eslintConfig": {
      "extends": "react-app"
    },
    "browserslist": {
      "production": [
        "&gt;0.2%",
        "not dead",
        "not op_mini all"
      ],
      "development": [
        "last 1 chrome version",
        "last 1 firefox version",
        "last 1 safari version"
      ]
    },
    "devDependencies": {
      "react": "^16.10.1",
      "react-dom": "^16.10.1",
      "tslint": "^5.20.0",
      "tslint-config-prettier": "^1.18.0",
      "tslint-react": "^4.1.0"
    }
  }</code></pre>
  </div>
  </div>
  </p>