Laravel & React, dynamically render on the fly - reactjs

Question

I recently started on React and I'm using it in combination with Laravel as I would like to replace my jquery by react on a step by step migration.
In my tests, the render instructions are always packaged in the component .js file like this :
ReactDOM.render(<Calculator />, document.getElementById('tutorial'));
and the div <div id="tutorial"></div> is placed in a view.
My problem is that the view is dynamically generated by my php code and sometimes I need to render several component in one page so this approach is not working. Hence I would like to trigger the rendering from the view so something like :
<div id="tutorial" intruction_to_render_calculator_component_in_this_div></div>
How can I do that ?

Answer 1

been all over it recently in trying to find a solution... So here is the one I found :
In my component I put a loop to screen all elements asking to be mount based on an rComponent attribute :
var divs = document.querySelectorAll("[rComponent='Calculator']");
if (divs.length > 0) {
//document.querySelector("[rComponent='calculator']");
for (var i = 0; i < divs.length; ++i) {
ReactDOM.render(<Calculator />, divs[i]);
}
//ReactDOM.render(<Calculator />, document.getElementById('tutorial2'));
}
In my view I just need to put a rComponent in my div :
<div id="tutorial" rComponent="Calculator"></div>
<div id="tutorial2" rComponent="Calculator"></div>
pretty happy with this way of working though I think it might slow the scripts high time