Getting a parsing error in with React.js

Question

I'm working on the React example from their website. What I have so far is:

<!DOCTYPE html>
  <head>
    <meta charset="utf-8">
    <title>Hello React</title>
    <script src="http://fb.me/react-0.12.0.js"></script>
    <script src="http://fb.me/JSXTransformer-0.12.0.js"></script>
    <script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
     <script src="http://cdnjs.cloudflare.com/ajax/libs/showdown/0.3.1/showdown.min.js"></script>
</head>
<body>
  <div id="content"></div>
  <script type="text/jsx">
     var data = [
        {author: "Pete Hunt", text: "This is one comment"},
        {author: "Jordan Walke", text: "This is *another* comment"}
      ];

    var converter = new Showdown.converter();

    var CommentBox = React.createClass({
      render:function(){
        return (
          <div className="commentBox">
            <h1>Comments</h1>
            <CommentList data={this.props.data}/>
            <CommentForm />
          </div>
        );
      }
    });

    var CommentList = React.createClass({
      render:function(){
        var commentNodes = this.props.data.map(function(comment){
          return (
            <Comment author={comment.author}>
              {comment.text}
            <Comment />
          );
        });
        return (
          <div className="commentList">
           {commentNodes}
          </div>
        );
      }
    });

    var Comment = React.createClass({
      render:function(){
        converter.makeHtml(this.props.children.toString())
        return(
          <div className="comment">
          <h2 className="commentAuthor">
            {this.props.author}
          </h2>
            <span dangerouslySetInnerHTML={{__html: rawMarkup}} />
        );
      }
    });

    React.render(
      <CommentBox data={data} />,
      document.getElementById("content")
    );
</script>
</body>
</html>

I'm currently just opening the HTML file in my web browser, but my console is giving me the following error:

Error: Parse Error: Line 41:

Unexpected token : at file:///C:/Users/jkm144/Desktop/React_Example/template.html

render:function(){

For some reason, it doesn't like the ":", pointing to the first time on the page it's used. I've gone through the code to look for syntax errors, but I don't see anything. Has anyone else had this problem?

in Comment you're trying to return multiple nodes. Wrap them in a div or similar. — Brigand
– Brigand, Commented Nov 14, 2014 at 22:51
No dice. I did notice that I didn't close my div tag in Comment. I closed and wrapped everything in the return in a div, but that didn't help. Same error. Unexpected token ":" — jordaniac89
– jordaniac89, Commented Nov 17, 2014 at 14:24

MUY Belgium · Accepted Answer · 2022-12-16 13:11:20Z

3

The markup in the CommentList component has incorrect closing tag syntax:

<Comment />

Since that component has an opening tag, it should be closed with </Comment>. In context:

BROKEN:

<Comment author={comment.author}>
  {comment.text}
<Comment />

Fixed:

<Comment author={comment.author}>
  {comment.text}
</Comment>
#  <--- / backslash was displaced

edited Dec 16, 2022 at 13:11

MUY Belgium

2,5205 gold badges33 silver badges48 bronze badges

answered Nov 17, 2014 at 17:01

Ross Allen

45k14 gold badges100 silver badges97 bronze badges

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

3 Comments

jordaniac89 Over a year ago

Cool. That fixed that error. I guess I had the syntax for calling the module, which would be <Comment /> with the closing tag. Still getting an error stating that rawMarkup is undefined at {commentNodes}. Not sure what that's about. I'm assuming "rawMarkup" is defined somewhere in the actual library.

Ross Allen Over a year ago

You need to assign rawMarkup as the output of the converter: var rawMarkup = converter.makeHtml(this.props.children.toString());.

jordaniac89 Over a year ago

Ooooh, I looked for that variable in my code but I guess I stupidly overlooked it. Thanks a lot!

Collectives™ on Stack Overflow

Getting a parsing error in with React.js

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related