Target container is not a DOM element in ReactJS

Question

I just started to learn ReactJS and I wrote my first code successfully. When the same pattern came to the component thing I am getting a error mentioning _Invariant Violation: registerComponent(...): Target container is not a DOM element. in the console. I am using react and babel cdn instead of downloading and importing.

<div id="=f_compo"></div>
<script type="text/babel">
    var compo= React.createClass({
        render: function(){
            return (<h3>This is a simple component</h3>);
        }
    });
    ReactDOM.render(<compo/> ,document.getElementById('f_compo'));
</script>

This was my index.html code (I removed the cdn links in the head tag because of the error while posting the question) and following thing is the error that I am receiving.

error:

_invariant _registerComponent _renderNewRootComponent wrapper renderSubtreeIntoContainer render wrapper i r o u f

Since there were few solutions in the google I need a clear explanation mentioning Why this kind of error occur? and How it can be solved in formal manner?

forJ · Accepted Answer · 2018-05-08 02:03:47Z

4

It's a typo

// You declared id as "=f_compo"
<div id="=f_compo"></div>
<script type="text/babel">
    var compo= React.createClass({
        render: function(){
            return (<h3>This is a simple component</h3>);
        }
    });
    //Find the same ID here. Right now it's "=f_compo" not "f_compo"
    ReactDOM.render(<compo/> ,document.getElementById('f_compo'));
</script>

answered May 8, 2018 at 2:03

forJ

4,6476 gold badges39 silver badges69 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Target container is not a DOM element in ReactJS

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related