Wrap an element (props.children) with an array of ParentComponent?

[Blankeos]

Let's say I have:

const child = props.children;
const layouts = [Layout1, Layout2, Layout3, Layout4];

How do I make it so that it wraps around child like this:

<Layout1>
  <Layout2>
    <Layout3>
      <Layout4>
        {child}
      </Layout4>
    </Layout3>
  </Layout2>
</Layout1>

My current solution is this:

function Layout(props: { children: JSX.Element, layouts: FlowComponent[] }) {
  const [layoutStore, setLayoutStore] = createStore(
    props.layouts?.toReversed() as FlowComponent[]
  );

  createEffect(() => {
    setLayoutStore(
      reconcile(props.layouts.toReversed() as FlowComponent[])
    );
  });

  const fn = (i: number) => {
    let item: FlowComponent = layoutStore[i];

    if (!item) return props.children;

    const layoutProps: { children: JSX.Element } = {
      get children() {
        return fn(i + 1);
      },
    };

    return createComponent(item, layoutProps);
  };

  return fn(0);
}

I based this off of MultiProvider - from solid primitives that makes it possible to call a single component to wrap multiple providers around a function.

It does work currently. But I'm having issues when it's on build (though I'm not sure if this is the culprit or something else under the hood). In any case, I'm wondering if there's a better solution? Or if I'm satisfying the Solid compiler correctly here?

---

In React, the solution is actually a bit more straightforward:

function Layout(props: { children: React.ReactNode, layouts: FC<PropsWithChildren>[] }) {

   let page = props.children;
   layouts.forEach((Layout) => {
      const child =  page;
      page = <Layout>{child}</Layout>
   });

    return page;
}

[atk]

Why not make it obvious that these are flow components?

<Layout1>
  {() => <Layout2>
    {() => <Layout3>
      {() => <Layout4>
        {child}
      </Layout4>}
    </Layout3>}
  </Layout2>}
</Layout1>

You might need to map arguments and props. Explicit is better than implicit.

[Blankeos]

Alright, let me rephrase. I meant ParentComponent (a component with a child essentially).

Thanks for making me realize this lol. I only just learned this after searching up the differences on the docs: https://docs.solidjs.com/configuration/typescript#components-with-props

Don't even know what FlowComponent is specifically for in terms of types. I just kinda used it on a whim when I noticed it was like the PropsWithChildren alternative on Solid as with React.

But does my correction on the terminology make my question clearer somehow?