Dynamically rendering a Component inside a "layout"

[hrdwdmrbl]

I wanted to know what the idiomatic way to render a component inside Layout is.

It seems that there are two approaches:

Set up a layout component like this:

const Layout = ({ children }) => {
  return (
    <Foo>
      { children }
    </Foo>
    );
}

and then inside each component

render (
  <Layout>
     <.../>
   </Layout>
);

and the view

react_component('posts/index', render(template: "/posts", formats: [:json]))

Set up a layout component like this:

const Layout = ({ component, componentProps }) => {
  const ViewComponent = ReactRailsUJS.getConstructor(component);
  const parsedComponentProps = JSON.parse(componentProps);
  return (
    <Foo>
      <ViewComponent {...parsedComponentProps} />
    </Foo>
    );
}

and then inside each component

render (
  <.../>
);

and the view

react_component('layouts/application', {
  component: 'posts/index',
  componentProps: render(template: "/posts", formats: [:json]),
})

---

Advantage of 2 is that you don't have to include the Layout component in every other component.
Also, it renders the Layout before the other component, which is necessary if a child depends on a context.
Disadvantage of 2 is that it requires manually parsing the jBuilder JSON and manually fetching and rendering the "child" component.

Is there a better way that I'm missing? I think a third way is using Router, but I can't because I'm also using Turbo.

[justin808]

I think this is beyond the scope of this project. If you've got a good way to do this, you can submit a doc PR.