CODEWITHSUNDEEP
javascriptreactjs
Julian Samarjiev
Julian Samarjiev

Reputation: 499

React tutorial error rendering CommentForm and CommentList

I just started with the official React tutorial and I seem to be stumbling upon an error that prevents the browser from showing the content, it's probably some stupid typo, but I can't seem to find it. In the var CommentBox when I remove <CommentList /> and <CommentForm />, only the element <h1>Comments</h1> appears, but when I add them nothing appears in the browser, even the <h1>Comments</h1>. What am I overlooking, any ideas? Thanks!

My code

<div id="content"></div>
    <script type="text/jsx">

      var CommentBox = React.createClass({
        render: function () {
          return (
            <div className="commentBox">
              <h1>Comments</h1>
              <CommentList />
              <CommentForm />
            </div>
          );
        }
      });
      React.render(
        <CommentBox />,
        document.getElementById('content')
      );

      var CommentList = React.createClass({
        render: function () {
          return (
            <div className="commentList">
              Hello, world! I am a CommentList.
            </div>
          );
        }
      });

      var CommentForm = React.createClass({
        render: function () {
          return (
            <div className="commentForm">
              Hello, world! I am a CommentForm.
            </div>
          );
        }
      });

    </script>

Upvotes: 1

Views: 448

Answers (1)

Jose Mato
Jose Mato

Reputation: 2799

You need to move your var declaration of "CommentList" and "CommentForm" to the top of the script tag, above "CommentBox". Because in javascript there are hoisting. I put an example in github: https://github.com/josemato/stackoverflow/blob/master/reactjs-tutorial/index.html

Upvotes: 2

Related Questions