title: Type '{}' is not assignable to type 'IntrinsicAttributes & IntrinsicClassAttributes
body: <p>i am currently making a simple react application. 
  this is my <code>index.tsx</code></p>
  
  <pre><code>import * as React from 'react';
  import * as ReactDOM from 'react-dom';
  import App from './components/App';
  import registerServiceWorker from './registerServiceWorker';
  
  ReactDOM.render(
    &lt;App /&gt;,
    document.getElementById('root') as HTMLElement
  );
  registerServiceWorker();
  </code></pre>
  
  <p>and here I have my <code>app.tsx</code></p>
  
  <pre><code>    import * as React from 'react';
  import SearchBar from '../containers/price_search_bar';
  
  interface Props {
    term: string;
  }
  
  class App extends React.Component&lt;Props&gt; {
  
    // tslint:disable-next-line:typedef
    constructor(props) {
      super(props);
      this.state = {term: '' };
    }
  
    render() {
      return (
        &lt;div className="App"&gt;
          &lt;div className="App-header"&gt;
            &lt;h2&gt;Welcome to React&lt;/h2&gt;
          &lt;/div&gt;
          &lt;p className="App-intro"&gt;
            this is my application.
          &lt;/p&gt;
          &lt;div&gt;
              &lt;form&gt;
              &lt;SearchBar term={this.props.term} /&gt;
              &lt;/form&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      );
    }
  }
  
  export default App;
  </code></pre>
  
  <p>and also my search bar container:</p>
  
  <pre><code>    import * as React from 'react';
  
  interface Props {
      term: string;
  }
  
  // tslint:disable-next-line:no-any
  class SearchBar extends  React.Component&lt;Props&gt; {
  
      // tslint:disable-next-line:typedef
      constructor(props) {
          super(props);
          this.state = { term: '' };
      }
  
      public render() {
          return(
              &lt;form&gt;
                  &lt;input 
                      placeholder="search for base budget"
                      className="form-control"
                      value={this.props.term}
                  /&gt;
                  &lt;span className="input-group-btn" &gt;
                      &lt;button type="submit" className="btn btn-secondary" &gt;
                          Submit
                      &lt;/button&gt;
                  &lt;/span&gt;
  
              &lt;/form&gt;
          );
      }
  }
  
  export default SearchBar;
  </code></pre>
  
  <p>and finally I have my <code>tsconfig.json</code>:</p>
  
  <pre><code>{
    "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"
    ]
  }
  </code></pre>
  
  <p>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:</p>
  
  <pre><code>./src/index.tsx
  (7,3): error TS2322: Type '{}' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;App&gt; &amp; Readonly&lt;{ children?: ReactNode; }&gt; &amp; Reado...'.
    Type '{}' is not assignable to type 'Readonly&lt;Props&gt;'.
      Property 'term' is missing in type '{}'.
  </code></pre>
  
  <p>I tried to fix it by modifying my <code>tsconfig.json</code> but the same error still appears, what am I doing wrong and why typescript is bahing like this. I am very new to this and by this example I am trying to udnertand how react works all together.</p>