How to create a React modal within a Ruby on Rails view?

Rails react_on_rails
1

Hi all,

I’m working on a Ruby on Rails app and I’m getting trouble when I try to create a React component that opens within a RoR view.

Here is my view so far:

<%= link_to react_partner_search_advanced_admin_partners_path(project_id: project.id), data: { remote: true, "partner-search-modal": true } do %>
  <i class="fab fa-searchengin"></i>
<% end %>

My action in my controller:

def react_partner_search
  @project = Project.find(params[:project_id])
  render layout: false
end

My react_component view:

<%= react_component("PartnerSearchApp", props: { project_address: @project&.project_or_client_full_address }, prerender: false) %>

And my React component:

import React from 'react';
import Modal from 'react-modal';
import { defaultModalStyles } from '../features/utilities/modalStyles';

const PartnerSearchApp = (props) => {
  return (
    <Modal isOpen={true} style={defaultModalStyles} appElement={document.body}>
      <h1>{props.project_address}</h1>
    </Modal>
  )
}

export default PartnerSearchApp;

When I click on my link, I’m listening for an "ajax:success" event. When it is triggered, I retrieve the response from the server. It is an HTML response that contains the whole 3 points exposed on this page: https://www.shakacode.com/react-on-rails/docs/guides/client-vs-server-rendering/

And this is precisely here that I’m stuck: my component is empty and there is no modal or content within it: <div id="PartnerSearchApp-react-component-xxxxx"> How can I retrieve my whole component and add it to my RoR view?

Thank you so much for your help!

2

I finally ended with a solution!

In my partner_search_bundle.js, I did:

import ReactOnRails from 'react-on-rails';
import PartnerSearchApp from '../bundles/PartnerSearch/startup/PartnerSearchApp';

// This listener is used to open PartnerSearchModal component. We need
// to wait that turbolinks is loaded to look for the modal link element.
document.addEventListener("turbolinks:load", () => {
  const modalLink = document.querySelector('[data-partner-search-modal]');

  if (modalLink) {
    // If server returns a success ajax answer, we retrieve the HTML response that
    // contains 3 elements we must use to rehydrate our PartnerSearch component:
    // 1. a script within the head tag, 2. a script within the body tag, 3. a div
    // within the body tag. More infos here: https://bit.ly/3Dp4atH
    modalLink.addEventListener("ajax:success", (e) => {
      const response = e.detail[0];

      document.head.append(response.head.children[0]);
      // We can't iterate through our body response because the append()
      // function remove the element from the its former parent.
      document.body.append(response.body.children[0]);
      document.body.append(response.body.children[0]);

      // Now we have all the 3 elements on our current body, we can reload the
      // ReactOnRails script to recreate our component in the current view.
      ReactOnRails.reactOnRailsPageLoaded();
    });
  }
})

ReactOnRails.register({ PartnerSearchApp });

Can be probably improved, but it works so far!

1 Like