load react script inside text/template script

Question

I'm trying to contribute to a project that uses <script type="text/template"></script> for rendering the elements of a page.

My contribution is to change the elements of the page into react components. However when I order the react to render in a specific div with ReactDOM.render() I get an error saying

Uncaught Error: _registerComponent(...): Target container is not a DOM element.

I know that means that react doesn't find the div where to render so propably I will need to load the react script after the div, I've tried that but the error is there again.

I've tried loading the react script otherwise like this

<script type="text/template">   
  <ul class="new-component-template" id="xblocklist" >
  </ul>
  <script type="text/babel" src="path to react file"/>
</script>

but when I load the page the error is gone an the script is not loaded at all.

What I need is to load the script when the outer script is called, I.E can I write a function inside <script type="text/template"></script> that actually loads the react script inside.

UPDATE

var ListXblocks = React.createClass({

componentWillMount: function(){
 this.setState({Problemstyle: this.props.Problemstyle})
 fetch('http://192.168.33.10:8002/XBlocks/')
 .then(result=>result.json())
 .then(result=> {
   this.setState({items:result})
 })
 },

 render:function(){
 return(

  <div>
    {
      this.state.items.map((item)=>{return(
        <li className="editor-manual" key={item.title}>
          <button type="button" className="button-component" data-category="problem" data-boilerplate="">
            <span className="name">{item.description}</span>
          </button>

        </li>)})

      }
  </div>

  );

  }

  });

  ReactDOM.render(<ListXblocks/>, document.getElementById('xblocklist'));

Answer 1

Script tag with type="text/template" doesn't do anything particularly and it just let browser to ignore what inside it. This approach usually uses by templating systems like handlebarjs and React doesn't support it. You can read more about this here. So if you put your React scripts also inside that, the browser is just going to ignore that as well.

Beacuse your ul tag is not a html element, document.getElementById('xblocklist') is going to return null. That's why you get "Target container is not a DOM element." error. So you have to get the html out of the script tag either manually or using JavaScript.