React Build Error #152

freeCodeCamp Support
1

ERROR in Console when doing “React: Review Using Props with Stateless Functional Components”:
Show error on page load. Won’t render components. Tested in Chrome and Firefox. Occurs on other React lessons as well. Tried disabling browser cache…no luck.

IN BROWSER CONSOLE:
Minified React error [#152]

FROM REACT WEBSITE
-Camper(…): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.-

2

I’m not sure I understand your problem. Are you saying that you can’t even bring up the page and type in your code? Or are you saying that you have typed in your code and when you run the tests you get this error? Or maybe you are saying something else?

Please clarify exactly where the error is occurring and if you are typing in code then please show us what you are doing.

3

When I just open the page for the mentioned lesson(s), the FCC console area briefly shows the default “test results will be here(paraphrase)”, then prints “Build error, open your browser console to learn more.” Browser console shows the error mentioned above.
I have tried resetting the code for the lesson.
I have tried refreshing and hard refreshing the page.
I have tried disabling browser cache.
When I perform the code, run the test, the following test results show in the FCC console:

The CampSite component should render.
The Camper component should render.
The Camper component should contain a p element with only the text from the name prop. (It does).

I have confirmed my code to be correct vs. a YouTube tutorial on the same exercise that yielded successful results.

4

Thanks for the clarification.

When I load the page I get the brief “Your test output will go here” and then I get the following error:

ReferenceError: Camper is not defined

So you should be getting an error when you first load the page (without having added any of your own code). You’re not getting the same error I am getting and I don’t know if they are related or if yours is a completely different issue. Maybe someone else has run into the error code you are getting and can shed some light?

If you want to paste your solution for this challenge in here I’ll run it through my browser real quick just to verify that it works in FCC.

5

Here is my code answer.

(Also of note: the build error only happens on " React: Review Using Props with Stateless Functional Components" and " React: Create a Stateful Component" lessons. Previous completed lessons are fine and a random selection of lessons ahead also seem to work.)

class CampSite extends React.Component {
constructor(props) {
super(props);
}
render() {
return (




);
}
};
// change code below this line
const Camper = (props) => {

{props.name}

};

Camper.defaultProps = {
name: ‘CamperBot’
}

Camper.propTypes = {
name: PropTypes.string.isRequired
}

6

html code in return of Campsite:
div
Camper
div

(with proper closures)

7

Hey, can you edit your code by putting three back ticks before and three back ticks after (that tells the forum to display your code as actual code).

And literally, just copy/paste exactly what you have in the code editor in between the three opening and three closing back ticks. I should be able to just copy/paste your code straight into the editor and have it work.

8 
  constructor(props) {
    super(props);
  }
  render() {
    return (
      <div>
        <Camper />
      </div>
    );
  }
};
// change code below this line
const Camper = (props) => {
  <p>{props.name}</p>
};

Camper.defaultProps = {
  name: 'CamperBot'
}

Camper.propTypes = {
  name: PropTypes.string.isRequired
}```
9

Thanks. I see the issue now:

const Camper = (props) => {
  <p>{props.name}</p>
};

This is not doing what you think it is doing. I don’t want to spoil the fun for you yet, so I’ll give you a little time to dwell on it :wink:

10

Got it. The build error made me assume it was a back-end problem and tutorial I watched was no help. Thanks and sorry to bother you.

  <p>{props.name}</p>
);```