React document not rendering

Question

My entire code looks like this:

<!DOCTYPE html>
<html>
<head>
    <title>React course</title>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://unpkg.com/react@15/dist/react.js"></script>
    <script src="https://unpkg.com/react-dom@15/dist/react-dom.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/babel-standalone/6.25.0/babel.min.js"></script>
</head>
<body>

    <div id="example"></div>

    <script type="text/babel">

        var Comment = React.createClass({

            edit: function () {
                alert('Editing comment');
            },

            remove: function () {
                alert('Removing comment');
            },

            render: function() {
                return (
                    <div className="commentContainer">  
                        <div className="commentText">Text of whatever</div>
                        <button onClick={this.edit} class="btn-primary">Edit</button>
                        <button onClick={this.remove} class="btn-danger">Remove</button>
                    </div>
                );
            }
        });

        ReactDOM.render(
            <div className="board"> 
                <Comment>Heya</Comment>
            </div>
        ,document.getElementById('container')); 
    </script>
</body>

When I refresh the page I see nothing. Then I inspect the element and I see the error that you see in the image but I do not really know what is going know since am new in react.

Hope you can help

You don't have element on a page called container, only <div id="example"></div> — Morpheus
– Morpheus, Commented Jul 31, 2017 at 9:52

spirift · Accepted Answer · 2017-07-31 09:53:04Z

3

I think it because you don't have an html element with an id of container. This section must reference a valid HTML element. document.getElementById('container'));

Try changing the id of example to container.

answered Jul 31, 2017 at 9:53

spirift

3,0721 gold badge16 silver badges20 bronze badges

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

1 Comment

Ragmah Over a year ago

Thanks it was that. For some reason I didn't notice

Collectives™ on Stack Overflow

React document not rendering

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related