Syntax error: Unexpected token, expected “;”

Question

I'm getting this syntax error in react:

3:28:16 PM: Syntax error: Unexpected token, expected ";" (1:10)
3:28:16 PM: > 1 | render() {
3:28:16 PM:     |          ^
3:28:16 PM:   2 |     if (this.props.post) {
3:28:16 PM:   3 |       return (
3:28:16 PM:   4 |         <div className="article">

I've looked at every tag and bracket multiple times through, to see if all had their opening and closing tag/bracket, and I can't seem to find the error. It could be something else, but I'm not good enough in javascript to spot the mistake.

I don't understand the error message either, what excactly does it mean when it says "expected,"?

Here is the code the error message refering to:

render() {
    if (this.props.post) {
      return (
        <div className="article">
          <a href={"/blog/" + this.props.post.ID} className="blackLink">
            {this.props.post.featured_image ? (
              <img
                className="img-responsive webpic"
                alt="article header"
                src={this.props.post.featured_image}
              />
            ) : (
              ""
            )}
            <h1 className="text-center">{this.props.post.title}</h1>
            <div className="content">{excerpt}</div>
          </a>
          <Link to={"/blog/" + this.props.post.ID}>
            <button className="btn">Read More</button>
          </Link>
        </div>
      );
    } else {
      return null;
    }
  }

Answer 1

I think you forgot to put function before render(). So it should be something like this:

function render() {
    if (this.props.post) {
      return (
        <div className="article">
          <a href={"/blog/" + this.props.post.ID} className="blackLink">
            {this.props.post.featured_image ? (
              <img
                className="img-responsive webpic"
                alt="article header"
                src={this.props.post.featured_image}
              />
            ) : (
              ""
            )}
            <h1 className="text-center">{this.props.post.title}</h1>
            <div className="content">{excerpt}</div>
          </a>
          <Link to={"/blog/" + this.props.post.ID}>
            <button className="btn">Read More</button>
          </Link>
        </div>
      );
    } else {
      return null;
    }
  }

Answer 2

looks like the issue is actually with " render() {" which you don't show in your code below.

Is "render" a function you are defining? If so do you need the keyword "function". If you don't put the keyword there, it thinks you are calling a function "render();" and therefore would need the ";" at the end of that statement.

 function render() {
     if (this.props.post) {
          return (
            <div className="article">
              <a href={"/blog/" + this.props.post.ID} className="blackLink">
                {this.props.post.featured_image ? (
                  <img
                    className="img-responsive webpic"
                    alt="article header"
                    src={this.props.post.featured_image}
                  />
                ) : (
                  ""
                )}
                <h1 className="text-center">{this.props.post.title}</h1>
                <div className="content">{excerpt}</div>
              </a>
              <Link to={"/blog/" + this.props.post.ID}>
                <button className="btn">Read More</button>
              </Link>
            </div>
          );
        } else {
          return null;
        }
      }