jQuery and React.js aren't playing nice

Question

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')
    );  
});

score 0 · Accepted Answer · answered Nov 18 '16 at 20:18

0

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

answered Nov 18 '16 at 20:18

luanped

3,178
2
26
40

score 0 · Answer 2 · edited Nov 18 '16 at 22:58

if you run console.log($('#container')); and then check the answer you will see that it doesn't return a DOM object the same way that running document.getElementById('container'); does.

Logging them both, the jquery one actually returns a jquery object in the jquery fn. namespace (ie n.fn.init[1]) that has an array with a reference to that DOM Element. React and jquery should be able to run alongside of each other. I haven't tested it, but you could possibly try something along the lines of:

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

but by that point it just makes more sense to use the native js method to target the render site.

jQuery and React.js aren't playing nice

2 Answers2