make logic component reusable in react

So i have a few very similar components with the same logic

import { useDetectClick } from 'src/utils/useDetectClick';  import ColumnMenu from 'src/components/presentational/menus/ColumnMenu';    const ColumnMenuContainer = () => {    const [isActive, setIsActive] = useDetectClick(false);    const onClick = (): void => {     setIsActive(!isActive);    };     return (    <>     <ColumnMenu onClick={onClick} isActive={isActive} />    </>   );  };    export default ColumnMenuContainer;  

and example of another one:

import { useDetectClick } from 'src/utils/useDetectClick';  import TaskMenu from 'src/components/presentational/menus/TaskMenu';    const TaskMenuContainer = () => {   const [isActive, setIsActive] = useDetectClick(false);   const onClick = (): void => {    setIsActive(!isActive);  };     return (    <>     <TaskMenu onClick={onClick} isActive={isActive} />    </>   );  };    export default TaskMenuContainer;  

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.

https://stackoverflow.com/questions/67362366/make-logic-component-reusable-in-react May 03, 2021 at 08:50AM