title: Converting stateless React component having arguments to stateful
body: <p>Inside my React JS project, I am working on the <code>PrivateRoutes</code>. 
  I have gone through this example of private routing and authenticating using <code>react-router-dom</code>. </p>
  
  <p><a href="https://reacttraining.com/react-router/web/example/auth-workflow" rel="nofollow noreferrer">https://reacttraining.com/react-router/web/example/auth-workflow</a></p>
  
  <p>According to this documentation, they have created a <code>PrivateRoute</code> as a stateless component. </p>
  
  <p>But my requirement is to convert it to stateful React component as I want to connect my <code>PrivateRoute</code> component to redux store.</p>
  
  <p>Here is my code.</p>
  
  <p><strong>stateless component</strong> </p>
  
  <pre><code>import React from 'react';
  import {Route, Redirect} from 'react-router-dom';
  import {auth} from './Authentication';
  
  const PrivateRoute = ({ component: Component, ...rest }) =&gt; (
      &lt;Route
        {...rest}
        render={props =&gt;
          auth.isAuthenticated ? (
            &lt;Component {...props} /&gt;
          ) : (
            &lt;Component {...props} action="login"/&gt;
          )
        }
      /&gt;
    );
  
    export default PrivateRoute;
  </code></pre>
  
  <p>I converted this component to stateful <code>React</code> component like this.</p>
  
  <p><strong>stateful React component</strong></p>
  
  <pre><code>import React from 'react';
  import {Route, Redirect} from 'react-router-dom';
  import {auth} from './Authentication';
  import {connect} from 'react-redux';
  
    class PrivateRoute extends React.Component {
      render({ component: Component, ...rest }) {
        return (
          &lt;Route
            {...rest}
            render={props =&gt;
              this.props.customer.isAuthenticated ? (
                &lt;Component {...props} /&gt;
              ) : (
                &lt;Component {...props} action="login"/&gt;
              )
            }
          /&gt;
        );
      }
    }
    export default connect(state =&gt; state)(PrivateRoute);
  </code></pre>
  
  <p>Here, I am reading the data from redux store to check whether the user is authenticated or not.</p>
  
  <p>But the way I am converting the stateless component to stateful isn't correct. </p>
  
  <p>Am I passing the arguments  <code>render({ component: Component, ...rest })</code> correctly?</p>
  
  <p>Will connecting the <code>PrivateRoute</code> with redux store create any problem with <code>props</code> as <code>state=&gt;state</code> will map <code>state</code> to <code>props</code> as well as <code>...rest</code> will have <code>props</code> object?</p>
  
  <p>Not sure what is happening inside the code.</p>
  
  <p><strong>Update</strong>
  AppRouter.js</p>
  
  <pre><code>import React from 'react';
  import {BrowserRouter, Route, Switch} from 'react-router-dom';
  import {TransitionGroup, CSSTransition} from 'react-transition-group';
  import PrivateRoute from './PrivateRoute';
  
  import HomePage from './../components/HomePage';
  import AboutUs from './../components/AboutUs';
  import ContactUs from './../components/ContactUs';
  import PageNotFound from './../components/PageNotFound';
  import RestaurantList from '../components/RestaurantList';
  import RestaurantMenu from '../components/RestaurantMenu';
  import UserDetails from '../components/UserDetails';
  import OrderConfirmation from '../components/OrderConfirmation';
  import CustomerAccount from '../components/CustomerAccount';
  import Logout from '../components/sections/Logout';
  
  
  export default () =&gt; {
      return (
          &lt;BrowserRouter&gt;
              &lt;Route render={({location}) =&gt; (
                  &lt;TransitionGroup&gt;
                      &lt;CSSTransition key={location.key} timeout={300} classNames="fade"&gt;
                          &lt;Switch location={location}&gt;
                              &lt;Route path="/" component={HomePage} exact={true}/&gt;
                              &lt;Route path="/about" component={AboutUs} /&gt;
                              &lt;Route path="/contact" component={ContactUs} /&gt;
                              &lt;Route path="/restaurants" component={RestaurantList} /&gt;
                              &lt;Route path="/select-menu" component={RestaurantMenu} /&gt;
                              &lt;PrivateRoute path="/user-details" component={UserDetails} /&gt;
                              &lt;PrivateRoute path="/order-confirmation" component={OrderConfirmation} /&gt;
                              &lt;PrivateRoute path="/my-account" component={CustomerAccount} /&gt;
                              &lt;PrivateRoute path="/logout" component={Logout} /&gt;
  
                              &lt;Route component={PageNotFound} /&gt;
                          &lt;/Switch&gt;
                      &lt;/CSSTransition&gt;
                  &lt;/TransitionGroup&gt;
              )} /&gt;
  
          &lt;/BrowserRouter&gt;
      );
  }
  </code></pre>