react_component in a response from a remote request

[ychaker]

First of all, great job making a simple gem that is easy to use and integrate. Much appreciated.

I am trying to use a component that is rendered in a partial that is rendered in a remote response from the server.

There's nothing special about the component:

<%= react_component 'MyComponent', { ... } %>

The response renders the following:

<div data-react-class="MyComponent" data-react-props="{...}"></div>

it all looks right from this perspective, but the component is not actually displaying, because I'm guessing the JS part is not triggered to transform the div to the component.
I can use the component normally on a page that is not rendered through an AJAX request, so I have confidence that everything works from that perspective.

How can I trigger manually the "compilation" of the component after the remote response completes?

[ychaker]

@renchap any pointers or help on this would be much appreciated, even if just a link to an example or something that could lead me in the right direction.

Thanks :)

[renchap]

This is currently not doable using webpacker-react. The proper solution would be to export the mountComponents function (https://github.com/renchap/webpacker-react/blob/master/javascript/webpacker_react-npm-module/src/index.js#L62) and accept a DOM element as root to call querySelectorAll on.

Until this is added to webpacker-react, you can implement your own mountComponents function and call it once the partial has been added to DOM. It is not difficult, just search for elements with data-react-class and call ReactDOM.render() on them, you can copy most of the code from this repo.

[ychaker]

hmmm... okay, I'll see what I come up with and share it here once I've got something going.
Thank you for the help.

[renchap]

I am closing this issue as it is a duplicate of #37. I will try to implement this as soon as I get some time.

[ychaker]

gracias