title: Reactjs: Pass functional component to another functional component to
body: <p>I am developing an react js app using functional components. 
  I am trying to reuse components in the code. I have a component <code>Frame</code> which has Sider and Header. I am trying to add <code>Content</code> component to that frame to display in the middle, but its not working though. </p>
  
  <blockquote>
    <p>Frame.tsx</p>
  </blockquote>
  
  <pre><code>const Frame : React.FC = (props) =&gt; {
      const [collapsed, onCollapse] = useState(false);
      const Content = props.content;
      console.log('Content: ',Content);
      return (
          &lt;Layout&gt;
              &lt;SideBar state={{ collapsed: [collapsed, onCollapse]}}/&gt;
              &lt;Layout&gt;
                  &lt;HeaderBar state={{ collapsed: [collapsed, onCollapse]}}/&gt;
                  {Content}
                  &lt;Footer&gt;footer&lt;/Footer&gt;
              &lt;/Layout&gt;
          &lt;/Layout&gt;
      );
  }
  
  export default Frame;
  </code></pre>
  
  <blockquote>
    <p>PublicRoute.tsx</p>
  </blockquote>
  
  <pre><code>interface PublicRouteProps extends RouteProps {
      // tslint:disable-next-line:no-any
      component: any;
      isAuthorized: boolean;
      content: Content;
  }
  
  const PublicRoute = (props: PublicRouteProps) =&gt; {
      const { component: Component, isAuthorized, content: Dummy, ...rest } = props;
      return (
          &lt;Route
              {...rest}
              render={(routeProps) =&gt;
                  isAuthorized ? (
  
                      &lt;Component {...routeProps}/&gt;
                  ) : (
                      &lt;Redirect
                          to={{
                              pathname: '/login',
                              state: { from: routeProps.location }
                          }}
                      /&gt;
                  )
              }
          /&gt;
      );
  };
  
  export default PublicRoute;
  </code></pre>
  
  <blockquote>
    <p>App.tsx</p>
  </blockquote>
  
  <pre><code>return (
          &lt;BrowserRouter&gt;
              &lt;div&gt;
                  &lt;Switch&gt;
                      &lt;PublicRoute path="/" component={Frame} exact isAuthorized={true} content={Dummy}/&gt;
                      &lt;Route path="/login" component={NewLogin} exact isAuthorized={true}/&gt;
                  &lt;/Switch&gt;
              &lt;/div&gt;
          &lt;/BrowserRouter&gt;
      );
  </code></pre>
  
  <p>I am not able to pass contents dynamically and I am not sure whats wrong.
  Thank you for your time.</p>