this is my index.tsx
import * as React from ‘react‘; import * as ReactDOM from ‘react-dom‘; import App from ‘./components/App‘; import registerServiceWorker from ‘./registerServiceWorker‘; ReactDOM.render( <App />, document.getElementById(‘root‘) as HTMLElement ); registerServiceWorker();
and here I have my app.tsx
import * as React from ‘react‘; import SearchBar from ‘../containers/price_search_bar‘; interface Props { term: string; } class App extends React.Component<Props> { // tslint:disable-next-line:typedef constructor(props) { super(props); this.state = {term: ‘‘ }; } render() { return ( <div className="App"> <div className="App-header"> <h2>Welcome to React</h2> </div> <p className="App-intro"> this is my application. </p> <div> <form> <SearchBar term={this.props.term} /> </form> </div> </div> ); } } export default App;
and also my search bar container:
import * as React from ‘react‘; interface Props { term: string; } // tslint:disable-next-line:no-any class SearchBar extends React.Component<Props> { // tslint:disable-next-line:typedef constructor(props) { super(props); this.state = { term: ‘‘ }; } public render() { return( <form> <input placeholder="search for base budget" className="form-control" value={this.props.term} /> <span className="input-group-btn" > <button type="submit" className="btn btn-secondary" > Submit </button> </span> </form> ); } } export default SearchBar;
and finally I have my tsconfig.json:
{ "compilerOptions": { "outDir": "build/dist", "module": "esnext", "target": "es5", "lib": ["es6", "dom"], "sourceMap": true, "allowJs": true, "jsx": "react", "moduleResolution": "node", "rootDir": "src", "forceConsistentCasingInFileNames": true, "noImplicitReturns": true, "noImplicitThis": true, "noImplicitAny": false, "strictNullChecks": true, "suppressImplicitAnyIndexErrors": true, "typeRoots": [ "node_modules/@types" ], "noUnusedLocals": true }, "exclude": [ "node_modules", "build", "scripts", "acceptance-tests", "webpack", "jest", "src/setupTests.ts" ] }
I keep getting different errors after errors and when ever I fix one error another one appears, I am not sure what I have done that make it behave like this. This is the latest error: