Render component in loop

[viniciuspalma]

Hi, I'm testing a migration from react-rails to hypernova. And I have a problem with render components in a loop. for example:

        <% ['how_works', 'who_participe', 'pay_something'].each do |item| %>

          <%= render_react_component 'components/common/faq_item.js', {
            title: I18n.t("faq.joga_junto.#{item}_title"),
            text: I18n.t("faq.joga_junto.#{item}_text") } %>
        <% end %>

Only the first item was rendered, and the others just created a <script> tag with the props(data) of request, but the react component was not rendered. And I don't know why :D.

[ljharb]

Currently a bundle can only be rendered once per page. You may want to look into creating one react bundle that takes an array, and renders all the items - ie, 1 bundle of N things, rather than N of 1 thing?

We are working on a way to make this work, but I do think that a single React tree would be a strictly better approach in the meantime.

[viniciuspalma]

Ohh, thanks for the dynamic response. How I said, I'm working in a migration from react-rails to hypernova, and with react rails I use this approach to render this items. And with this facts I'll change the way how I currently render components.

[dpuscher]

@ljharb Any chance this might work in the near future? When using Hypernova as an easy way to include React components into a Rails view, it would be nice (at least in my project) to be able to render a single component more than one time. Seems like it doesn't work right now...

[ljharb]

@dpuscher the workaround is to make a different top-level component for each instance you want to render. Do you have a specific use case where this is difficult?