Problem with keyword "this" in React class on CodePen

/* Specifically, why does CodePens’s JavaScript section complain about “unexpected keyword ‘this’” in the conditional statement, when the code in the second Results example (below the first example) works fine in FCC’s Render-conditionally-from-props
challenge? I’ve been fighting this (no pun intended) for a couple of days, so it’s time to ask for enlightenment!*/

class Results extends React.Component {
  constructor(props) {
  if (this.props.hadCR) {
    render() {
      return {marked(this.props.msg)+"<br />"};
  }  else  {
    render() {
      return marked(this.props.msg)};

class Results extends React.Component {
  constructor(props) {
  render() {
    {/* Change code below this line */}
    return <h1>{this.props.fiftyFifty >= .5 ? "You Win!" : "You Lose!"}</h1>;
    {/* Change code above this line */}

I’ve edited your post for readability. When you enter a code block into a forum post, please precede it with a separate line of three backticks and follow it with a separate line of three backticks to make it easier to read.

You can also use the “preformatted text” tool in the editor (</>) to add backticks around text.

See this post to find the backtick on your keyboard.
Note: Backticks (`) are not single quotes (’).

Thanks, JeremyLT! I’ll try to remember that tip for next time.

Can you share a link to your CodePen?

Without knowing more, I can tell you that “unexpected keyword” or “unexpected symbol” very often means that you forgot a ;, ), ], or }.

  1. The components should not be named the same.

  2. I would assume one component would be passing props to the other. If not, we must be missing another component (based on the props in use).

  3. You are referencing non-existing props.

  4. You have a call to marked which I have no idea what is in this context (I know the library).

  5. You have two render in the first component, the challenge you are referencing does not. It is using two returns (that is conditionally returning one string or another string).

As said, if you can post your Codepen project we might be able to better help.

Here’s the link:

Thanks for responding.

  1. The components are the same name because, though from different projects, the first one doesn’t work, while the second one does.
  2. Both components are “helpers” which do indeed receive props from the main components in their respective projects.
  3. The props do exist in the original projects.
  4. I just posted the link to the problem project. As this is a work-in-progress, it does not do everything FCC wants it to, but you’ll see a call to marked() in the id=“preview” element near the bottom of the linked project; that’s what supplies the “msg” prop in the problematic “Result” component.
  5. I’ve tried 2 render in the first component, making the assumption that using a conditional statement to switch between the 2 is permissible. Maybe it’s not? That’s part of what I’m asking about. My problem is that I’m new enough to React that I don’t know even what questions to ask!

I don’t see the error when I open your CodePen. Have you fixed it?

It’s not fixed. I had clicked on the error icon in the lower right corner, so it was displaying the error message, but not the icon. Do you see it now?

I see what happened. The link you shared is to freeCodeCamp’s example project. Please share the link to your pen.

Ooops. (If this context allowed blushing, I’d be doing so!)
Here’s the correct link:

It looks like your problem is line 12:

  if (this.props.hadCR)

You have this dangling if with no body. When I remove that line and run Analyze JavaScript, it doesn’t find any syntax errors.

Thank you, ArielLeslie! I’ve been reviewing the FCC projects that lead up to this one, and found that, in a React component created the way Result is, one refers to props by just enclosing them in curly braces, without using either “this” or “props”. In other words, your very first suggestion was on the right track! Thanks again!

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.