title: Spread operator with React Typescript
body: <p>I have a single page application with redirecting implemented as </p>
  
  <pre><code>const PrivateRoute = ({ component: Component, ...rest }) =&gt; (
  &lt;Route {...rest} render={(props) =&gt; (
      Acc.isLoggedIn === true
          ? &lt;Component {...props} /&gt;
          : &lt;Redirect to={{
              pathname: '/login',
              state: { from: props.location }
          }} /&gt;
  )} /&gt;
  </code></pre>
  
  <p>)</p>
  
  <pre><code>export { PrivateRoute };
  </code></pre>
  
  <p>I'm trying to update it to work something like this</p>
  
  <pre><code>interface IPrivateRouteProps {
  }
  
  interface IPrivateRouteState {
    isAuthenticated?: boolean
  }
  
  export class PrivateRoute extends React.Component&lt;IPrivateRouteProps, IPrivateRouteState&gt; {
  constructor(props: IPrivateRouteProps) {
      super(props);
  
      this.state = ({ isAuthenticated: null });
  }
  
  componentDidMount() {
      Acc.isAuthenticated()
          .then(isAuthenticated =&gt; {
              this.setState({ isAuthenticated: isAuthenticated });
          });
  }
  
  render() {
      if (this.state.isAuthenticated == null) {
          return null;
      }
      else if (this.state.isAuthenticated) {
          return &lt;Route {...rest} render={(props) =&gt; (&lt;Component {...props} /&gt;)}/&gt;
      }
      else {
          return &lt;Route {...rest} render={(props) =&gt; (&lt;Redirect to={{ pathname: '/login', state: { from: props.location } }} /&gt;)}/&gt;
      }
  }
  }
  </code></pre>
  
  <p>How can I pass on the props using the spread operator in typescript?</p>
  
  <p><strong>Update</strong></p>
  
  <p>Needless to say, I'm not just relying to client side code for authentication.</p>
  
  <p>I have already tried this but it didn't help: <a href="https://stackoverflow.com/questions/43664031/spreading-react-props-in-tsx-in-typescript-2-3-1">Spreading react props in tsx in typescript 2.3.1</a> </p>