How to render variable component in react

Question

I wanna render a variable component in react and MobileNav in all the pages. I found out that React.cloneElement is workable, but cannot pass my MobileNav into it.

const index: React.FC<LayoutProps> = ({ children, type }) => {
  let Layout = null;

  const { onToggleOpen, isOpen } = useHamburger();

  switch (type) {
    case "home": {
      Layout = <HomeLayout />;
      break;
    }
    case "basic": {
      Layout = <BasicBlogLayout />;
      break;
    }
    case "list": {
      //
      break;
    }
    default: {
      Layout = <HomeLayout />;
    }
  }

  return (
    <Layout>
      <MobileNav onClick={onToggleOpen} isOpen={isOpen} />
      {children}
    </Layout>
  );

  // return React.cloneElement(Layout, { children }); // this is work, but i also need render MobileNav.
};

export default index;

Answer 1

When you say Layout = <HomeLayout />;, you are already creating an instance of a Component.

What you actually need to do is Layout = HomeLayout;

This was, you get the class and then you can use it like you want.

const index: React.FC<LayoutProps> = ({ children, type }) => {
  let Layout = null;

  const { onToggleOpen, isOpen } = useHamburger();

  switch (type) {
    case "home": {
      Layout = HomeLayout;
      break;
    }
    case "basic": {
      Layout = BasicBlogLayout;
      break;
    }
    case "list": {
      //
      break;
    }
    default: {
      Layout = HomeLayout;
    }
  }

  return (
    <Layout>
      <MobileNav onClick={onToggleOpen} isOpen={isOpen} />
      {children}
    </Layout>
  );

};

export default index;