How can i make document.addEventListener 'turbolinks:load' run when i came from link_to helper via react Webpacker on Rails 5?

Viewed 2790

So my project is using react with Webpacker on Rails 5. If i go to the page by link_to helper seems like javascript under document.addEventListener('turbolinks:load') not working.

This is my root controller insurance_form_container.jsx

import React from 'react'
import ReactDOM from 'react-dom'
import StartForm from './insurance_form/start_form'

console.log('root react')

document.addEventListener('turbolinks:load',function () {
  ReactDOM.render(
    <StartForm />,
    document.getElementById('start-form-index-container')
  )
})

This is my html template for this route

<div class="container">
  <div id="start-form-index-container">

  </div>
</div>

<%= content_for(:footer) do %>
    <%= javascript_pack_tag('insurance_form_container') %>
<% end %>

This is my link form the other page.

<%= link_to users_insurance_form_start_path,
            class: 'btn btn-lg btn-success btn-primary-green' do %>
    ดำเนินการต่อ
<% end %>

Seems like console.log('root react') is running correctly but ReactDOM.render is not running at all. Unless if i refresh the page it is loading correctly.

Am i missing something? How can i make .jsx code running through link_to helper?

Thanks!

1 Answers
Related