Doug Beney Doug Beney - 16 days ago 5
Jade Question

jQuery and React.js aren't playing nice

The error:

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


The line the is causing the is
$('#container')
in main.jsx. When I substitute that for
document.getElementById('container')
all is well. What am I doing wrong? Is jQuery not meant to work with React?

index.jade

doctype html
html
head
script(src="lib/babel/browser.min.js")
script(src="lib/react/react.min.js")
script(src="lib/react/react-dom.min.js")
script(src="lib/jquery/dist/jquery.min.js")
body
#container

script(src="public/js/main.jsx", type="text/babel")


main.jsx

$(function(){
var Doug = React.createClass({
render: function(){
return (<h1>Hello world</h1>);
}
});

ReactDOM.render(
<Doug></Doug>,
$('#container')
);
});

Answer

$('#container') is a jQuery object, not a DOM element, try $('#container')[0]

Comments