title: TypeScript - ReactRouter | Arrow function captures the global value of 'this' which implicitly has type 'any'
body: <p>I'm rendering a component via React Router 4 using <code>render={() =&gt; &lt;/Component /&gt;}</code></p>
  
  <p>I need to pass state to the given component i.e: <code>&lt;Game /&gt;</code>
  </p>
  
  <pre><code>export const Routes: React.SFC&lt;{}&gt; = () =&gt; (
    &lt;Switch&gt;
      &lt;Route path="/" exact={true} component={Home} /&gt;
      &lt;Route path="/play-game" render={() =&gt; &lt;Game {...this.state} /&gt;} /&gt;
      &lt;Redirect to="/" /&gt;
    &lt;/Switch&gt;
  )
  
  </code></pre>
  
  <p>To which TS breaks saying:</p>
  
  <p><code>The containing arrow function captures the global value of 'this' which implicitly has type 'any'</code>
  <a href="https://i.stack.imgur.com/sA4Lw.png" rel="noreferrer"><img src="https://i.stack.imgur.com/sA4Lw.png" alt="enter image description here"></a></p>
  
  <p>The final goal is to be able to pass the <code>Routes</code> to my main app: i.e:
  </p>
  
  <pre><code>export default class App extends Component&lt;{}, AppState&gt; {
    public state = {
      // state logic
    }
  
    public render(): JSX.Element {
        return (
          &lt;BrowserRouter&gt;
            &lt;div className="App"&gt;
              &lt;Navigation /&gt;
              &lt;Routes /&gt;
            &lt;/div&gt;
          &lt;/BrowserRouter&gt;
        )
    }
  }
  </code></pre>
  
  <p>How could I apply the correct types to suppress this TypeScript error?</p>