title: make logic component reusable in react
body: <p>So i have a few very similar components with the same logic</p>
  <pre><code>import { useDetectClick } from 'src/utils/useDetectClick';
  import ColumnMenu from 'src/components/presentational/menus/ColumnMenu';
  
  const ColumnMenuContainer = () =&gt; {
    const [isActive, setIsActive] = useDetectClick(false);
    const onClick = (): void =&gt; {
     setIsActive(!isActive);
    };
  
   return (
    &lt;&gt;
     &lt;ColumnMenu onClick={onClick} isActive={isActive} /&gt;
    &lt;/&gt;
   );
  };
  
  export default ColumnMenuContainer;
  </code></pre>
  <p>and example of another one:</p>
  <pre><code>import { useDetectClick } from 'src/utils/useDetectClick';
  import TaskMenu from 'src/components/presentational/menus/TaskMenu';
  
  const TaskMenuContainer = () =&gt; {
   const [isActive, setIsActive] = useDetectClick(false);
   const onClick = (): void =&gt; {
    setIsActive(!isActive);
  };
  
   return (
    &lt;&gt;
     &lt;TaskMenu onClick={onClick} isActive={isActive} /&gt;
    &lt;/&gt;
   );
  };
  
  export default TaskMenuContainer;
  </code></pre>
  <p>The only difference is Component name which they are returning. It look's like i'm repeating myself. I am wondering how to make it Reusable (if only it's possible). I thought about passing component (taskMenu etc.) to one universal Menu component as a prop, but i can't find any similar issue anywhere in web and don't know how to do it.</p>
  <p>EDIT:</p>
  <pre><code>import { useDetectClick } from 'src/utils/useDetectClick';
  
  interface Props{
    Component:React.ReactNode;
  }
  
  const ClickableContainer : React.FunctionComponent&lt;Props&gt; = ({Component}) =&gt; {
   const [isActive, setIsActive] = useDetectClick(false);
   const onClick = (): void =&gt; {
     setIsActive(!isActive);
   };
  
   return &lt;Component onClick={onClick} isActive={isActive} /&gt;;
  };
  
  export default ClickableContainer;
  </code></pre>
  <p>When i am trying this solution, this error occurs:</p>
  <blockquote>
  <p>JSX element type 'Component' does not have any construct or call signatures.</p>
  </blockquote>
  <p>And it's underlining &quot;Component&quot;.</p>
  <p>EDIT - WORKING SOLUTION:</p>
  <pre><code>import { useDetectClick } from 'src/utils/useDetectClick';
  
  interface NestedComponentProps {
    onClick: () =&gt; void;
    isActive: boolean;
  }
  
  interface Props {
    Component: React.FC&lt;NestedComponentProps&gt;;
  }
  
  const Menu: React.FC&lt;Props&gt; = ({ Component }) =&gt; {
    const [isActive, setIsActive] = useDetectClick(false);
    const onClick = (): void =&gt; {
      setIsActive(!isActive);
    };
  
    return &lt;Component onClick={onClick} isActive={isActive} /&gt;;
  };
  
  export default Menu;
  </code></pre>