Pavarine Pavarine - 1 month ago 11
React JSX Question

React.js - Target container is not a DOM element

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

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))
Comments