I'm receiving the following error when trying to run my react app:
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
21 | </a>
22 | </header>
23 | <Confirm />
| ^
24 | </div>
25 | );
26 | }
Here is my Confirm component code
import * as React from "react";
class Confirm extends React.Component{
render(){
return (
<div className="confirm-wrapper confirm-visible">
<div className="confirm-container">
<div className="confirm-title-container">
<span>This is where our title should go</span>
</div>
<div className="confirm-content-container">
<p>This is where our content should go</p>
</div>
<div className="confirm-buttons-container">
<button className="confirm-cancel">Cancel</button>
<button className="confirm-ok">Okay</button>
</div>
</div>
</div>
);
}
}
export default Confirm;And App.tsx code
import React from 'react';
import logo from './logo.svg';
import './App.css';
import Confirm from './Confirm';
const App: React.FC = () => {
return (
<div className="App">
<header className="App-header">
<img src={logo} className="App-logo" alt="logo" />
<p>
Edit <code>src/App.tsx</code> and save to reload.
</p>
<a
className="App-link"
href="https://reactjs.org"
target="_blank"
rel="noopener noreferrer"
>
Learn React
</a>
</header>
<Confirm />
</div>
);
}
export default App;This is my package.json
{
"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": [
">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"
}
}