Render not getting called using helper method when additional component added via ajax

[nao-de]

I have an infinite pagination gem active on my page. It basically runs an ajax script when it hits the bottom of the page and loads more posts, which exist as react_components. The helper method is able to generate the react_component and add it as HTML (see below), but the render method is never actually called, so it just exists as an empty div. The components loaded initially with the page work, just not additional components delivered via AJAX.

<
div data-react-class="MainPostBox" data-react-props="{"parentID":18,"imageSource":"test.png","postTitle":"JODKPTSJ","postPrice":"$5,174.54","postCommentsCount":"0","userName":"user #3","initialVoteCount":0,"initialHasUpvote":false,"initialHasDownvote":false,"hasDownvoteButton":false,"votableType":"posts"}">

(had to delete some of the brackets in the div tags because markdown was counting them as comments)

[rmosolgo]

react-rails has some javascript helpers. On page load, it automatically calls ReactRailsUJS.mountComponents() to mount all the components into their <div>s. If you add new components after page load, you should call that helper yourself. For example:

$.get("/more/html", function(result) {
  $("#content").append(result) // add it to the page 
  ReactRailsUJS.mountComponents() // mount the React components 
})

The function takes a selector too, if you want to scope it to part of the page: https://github.com/reactjs/react-rails/blob/master/lib/assets/javascripts/react_ujs.js.erb#L31

[nao-de]

This worked. Thank you!