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 forJ · Accepted Answer · 2018-05-08T02:03:47

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>

Target container is not a DOM element in ReactJS

1 Answers