React.js - Target container is not a DOM element

Question

Trying to render a react component:

var wrapper = document.getElementById('wrapper');
console.log(wrapper);
ReactDOM.render(
  React.createElement(components.WrapperComponent),{modules_list:modules_list},wrapper);

Gives me:

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

I know this error may throw when You try to execute react before the html documentt is properly loaded, but my script tag is located on bottom of the document, just before the end body tag. This may happens also when a name mismatch occurs, but i'm sure the a div with id 'wrapper' exists in my document. When I console.log(wrapper) it gives me the object, it's not undefined , so idk why react refuses to render it.

ps: I'm "importing" the react component with RequireJS require function:

requirejs(['jsx!layout/WrapperComponent'], function (WrapperComponent) {
        components.WrapperComponent = WrapperComponent;
        render();
    });

Then the render() funct is trying to render as exposed above.

Part of my html doc:

<body class="navbar-top has-detached-right">

    <div id='wrapper'> .... </div>

Answer 1

The 2nd argument of ReactDom.render should be the dom container. But you put {modules_list:modules_list}. I think what you meant to do is

ReactDOM.render(React.createElement(components.WrapperComponent, {modules_list:modules_list}),wrapper))

React.js - Target container is not a DOM element

Question

1 answers

solution1
1 ACCPTED 2016-10-27 14:18:41

React.js - Target container is not a DOM element

Question

1 answers

solution1 1 ACCPTED 2016-10-27 14:18:41

solution1
1 ACCPTED 2016-10-27 14:18:41