title: React with TypeScript: Type '{}' is not assignable to type
body: <p>I have a component in React that shows a navigation based on a prop. I cannot figure out why I am getting this error when I'm trying to run the application:</p>
  
  <pre><code>(19,8): Type '{}' is not assignable to type 'IntrinsicAttributes &amp; IntrinsicClassAttributes&lt;TableSystems&gt; &amp; Readonly&lt;{ children?: ReactNode; }...'.
    Type '{}' is not assignable to type 'Readonly&lt;{ todos: any; showNav: boolean; }&gt;'.
      Property 'todos' is missing in type '{}'.
  </code></pre>
  
  <p>My component look like this:</p>
  
  <pre><code>import * as React from 'react'
  import Navigation from '../components/Navigation'
  import TableSystems from '../components/TableSystems'
  
  class SystemTable extends React.PureComponent&lt;{showNav: boolean }&gt; {
    render(){
    return (
  
      &lt;div &gt;
      &lt;div &gt;
      &lt;div className="navigationContainer"&gt;
      &lt;Navigation {...this.props.showNav} className="sideMenu"/&gt;
        &lt;TableSystems/&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;)
    }
  }
  
  
  export default SystemTable
  </code></pre>
  
  <p>I can't find what's the problem here.</p>
  
  <p>The  component looks like this:</p>
  
  <pre><code>import * as React from 'react';
  import history from '../history';
  
  
  class Navigation extends React.Component&lt;any&gt;  {
  
  constructor(props){
      super(props);
      this.toVersions = this.toVersions.bind(this);
    }
  
    toVersions(){
      history.push('/versions');
    }
  
    render() {
      var style = this.props.visible ? "toggled" : "";
      console.log(style);
      return (
        &lt;div className={style} id="wrapper"&gt;
  
  
          &lt;div id="sidebar-wrapper"&gt;
            &lt;ul className="sidebar-nav"&gt;
              &lt;li className="sidebar-brand"&gt;
                &lt;a href="#"&gt;
                  Menu
                &lt;/a&gt;
              &lt;/li&gt;
              &lt;li &gt;
                &lt;a className="nav-link" href="#"&gt;List1&lt;/a&gt;
              &lt;/li&gt;
              &lt;li &gt;
                &lt;a className="nav-link" href="#"&gt;List2&lt;/a&gt;
              &lt;/li&gt;
              &lt;li &gt;
                &lt;a className="nav-link" href="" onClick={this.toVersions}&gt;List3&lt;/a&gt;
              &lt;/li&gt;
              &lt;li &gt;
                &lt;a className="nav-link" href="#"&gt;List4&lt;/a&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      )
    }
  }
  
  export default Navigation
  </code></pre>