How to pass parameters from root html element to ReactJS from Ruby on Rails app

Question

I am trying to implement ReactJS on a Ruby on Rails application using webpacker gem.

Does anyone know how to read/pass data attributes to ReactJS component.

Please find the code below.
in index.html.erb
<div id="data" data-item-id="<%= @item.id %>"></div>

in Data.jsx file

<!-- language: lang-js -->

class Data extends React.Component {
  constructor(props) {
    super(props);
  }

 componentDidMount() {
   this.getSiteDetails();
 }

 getSiteDetails(){
  fetch(i want to pass data attributes here along with the url)
 }

 render() {}
}

ReactDOM.render(<Data />, document.getElementById('data'));

Something like this would work: `let el = document.getElementById('data'); ReactDOM.render(, el);` — Brian, Jun 27 '18 at 02:57
@Brian Thank you very much for the help. I think the following answer is better. — Charith H, Jun 27 '18 at 03:20

score 1 · Accepted Answer · edited Jun 27 '18 at 03:27

1

You can do this:

 getSiteDetails(){
   const itemId = document.getElementById('data').dataset.itemId
   fetch(you can use itemId in here)
 }

edited Jun 27 '18 at 03:27

7urkm3n

6,054
4
29
46

answered Jun 27 '18 at 03:15

Giang Le

6,446
4
23
26

How to pass parameters from root html element to ReactJS from Ruby on Rails app

1 Answers1