Passing props to a webpacker react component in rails 5.1 - ruby-on-rails

Question

How do you pass props or data to the component when using the
javascript_pack_tag tag?
currently
/application.html.erb
<%= javascript_pack_tag 'flash_messages', data: {messages: flash_messages} %>

Answer 1

<%= javascript_pack_tag 'CropImages' %>
<%= content_tag :div,
id: "appointments_data",
data: #product.to_json,
front_image: url_for(#product.front_image),
back_image: url_for(#product.back_image) do %>
<% end %>
react component :
document.addEventListener('DOMContentLoaded', () => {
const node = document.getElementById('appointments_data')
const data = JSON.parse(node.getAttribute('data'))
const frontImage = node.getAttribute('front_image')
const backImage = node.getAttribute('back_image')
ReactDOM.render(
<CropImages data={data} front_image={frontImage} back_image={backImage} />,
document.body.appendChild(document.createElement('div')),
)
})

Answer 2

It could be done in several ways.
1.you could by pass props "by hand"
document.addEventListener('DOMContentLoaded', () => {
const node = document.getElementById('flash_messages_data')
const data = JSON.parse(node.getAttribute('data'))
ReactDOM.render(
<FlashMessages messages={data} />,
document.body.appendChild(document.createElement('div')),
)
})
Or you could you gem, which basically does almost the same:
https://github.com/renchap/webpacker-react
in you view
<%= react_component('FlashMessages', { messages: [] }) %>
<%= javascript_pack_tag 'components/flash_messages' %>
and in your component
import React, { Component } from 'react'
import WebpackerReact from 'webpacker-react'
class FlashMessages extends Component {
...
render() {}
}
WebpackerReact.setup({FlashMessages}) // ES6 shorthand for {Hello: Hello}
last line basically parses data attribute generated by the react_component helper, and passes to your component.