Using top level component with react_component

[bswinnerton]

Hi there,

I was wondering there is a paved path or suggestion on how to use the react_component helper with "top level" components like <App>. In my example, <App> is used for things like error boundaries, providers, etc, and all components should be wrapped inside of it. For example, with the following components:

function App(props) {
  const { children } = props;

  return (
    <Provider>
      {children}
    </Provider>
  );
}

function Homepage(props) {
  return <div>Hello world</div>
}

Is there a way to use the render_component helper to ensure all components passed to it are wrapped in <App></App>? Effectively resulting in:

<App>
  <Homepage />
</App>

System configuration

Webpacker version: 5.2.1 React-Rails version: 2.6.1 Rect_UJS version: 2.6.0 Rails version: 6.0.3.4 Ruby version: 2.7.1

[breadface]

Are there any updates on this issue?

[justin808]

Hi @bswinnerton and @breadface, I'm not sure how this can be done with react-rails.

Maybe this can provide some inspiration, with what I call a render component: Specifying Your React Components: Register directly or use render-functions

Take a look at how you can use react-helmet to set meta tags during server-side rendering: Using React Helmet to build content.

Just to be transparent, while I'm the creator of React on Rails and React on Rails Pro, my livelihood is consulting on all solutions using React with Rails, including plain rails/webpacker.