React-rails: Component not rendering when containing partial rendered from JS

[uriklar]

Here's my case:
I've got a view with a _conversation_info.html.haml partial that contains my react_component tag among other things.

In my code I execute an ajax request which in turn re renders the _conversation_info partial. The thing is, the second time the partial is rendered the react component doesn't render. I can see it's receiving the updated props, but nothing is being called.

Any idea on how to solve this? Thanks!
Uri

[rmosolgo]

Are you inserting the html into the page after the AJAX request? (Or maybe a library is doing it for you?)

If so, you'll need to trigger the React mounting operation manually:

ReactRailsUJS.mountComponents()
// Alternatively, scope the mounting operation: 
ReactRailsUJS.mountCompunents('#my-container')

react-rails does this for you on page load & unload, but if you add components to the page at other times, you must call that function yourself!

[danott]

@rmosolgo react_ujs has affordances for Turbolinks. Would it mitigate some of these issues to provide the same for Rails jQuery UJS events? (ajax:complete, etc.)

[rmosolgo]

I don't know, I don't actually use them! Which ones would get hooked up to which React UJS functions?

[danott]

The more I revisit it, the more it's clear there's nothing to be gained.

If you use data-remote="true", and the response directly manipulates the page (say from a create.js.erb template), no ajax:complete event is fired.

If you're listening to the ajax:complete event, you're manipulating the page yourself.

So either way, a manual triggering of ReactRailsUJS.mountComponents() would be necessary.

Suggestion officially redacted.

[rmosolgo]

please reopen if manually mounting components didn't work for you!

[jlgasparrini]

Thanks @rmosolgo 😄 Using ReactRailsUJS.mountCompunents('#my-container') after my ajax request works for me!

[kunalmawade]

I was having similar problem. I solved it by adding { prerender: true }