React component constructor (Parsing error: Unexpected token , expected “}”)

Question

Parsing error: unexpected token, expected }

on the { of constrctor(props){

I have some other class above this one doing the same thing as constructor(props) but no error

if I add } before this class, no matter how many } I added, the error is the same.

if I add { before this class, and } after it, it is ok, but the class below this one would show the same error on constructor

After I tried to add {} too surround each class below, it would show

Parsing Error: unterminated JSX contents

right before export

    import React from 'react';
    import ReactDOM from 'react-dom'; 
    import './App.css';
    import $ from 'jquery';

//some classes extends React.Component

class CommentRow extends React.Component {
  constructor(props) {
    super(props);
    this.DeleteComment=this.DeleteComment.bind(this);
  }

  DeleteComment(e) {
    this.props.dComment(e.target._id);
  }

  render() {
    const comment=this.props.comment
    if (comment.name==this.state.name)
        var yourcomment=<tr _id={comment._id} ondoubleclick={this.DeleteComment}> 
        else 
        var yourcomment=<tr _id={comment._id}>
    return (
    {yourcomment}
    <td>comment.time</td>
    <td>comment.name</td>
    <td><p> said: </p></td>
    <td id="comentcontent">comment.content</td>
      </tr>
    );
  }
}

class Profile extends React.Component {
        constructor(props){
            super(props);
            ....
            some functions
        }
    render(){
        return(
            //some more code
        );
    }
}



class FrontApp extends React.Component {
    //constructor
    render(){
        return(
            //some more code
            <Profile
                  //some function
            />
        );
    }
}

export default Frontapp

Answer 1

Is the Class key word upper case in your code? It should be class . The error message is not clear about it but maybe this is the problem.

Answer 2

I don't think that way of returning something in your CommentRow 's render function is valid, even though technically the variable yourcomment is the opening <tr> tag it's needing. (You also had a few other small syntax errors in your JSX).

Instead try to have the <tr> there and conditional add props to it, like so:

render() {
    const { comment } = this.props;
    const { name } = this.state;

    return (
    <tr _id={comment._id} onDoubleClick={comment.name === name && this.DeleteComment}>
       <td>{comment.time}</td>
       <td>{comment.name}</td>
       <td><p> said: </p></td>
       <td id="comentcontent">{comment.content}</td>
    </tr>
    );
  }