Create a Stateless Functional Component - Error when not in fcc environment

JavaScript
#1

Tell us what’s happening:
It works in the challenge, but not outside of the fcc coding environment. I see this error in my browser:
Warning: Functions are not valid as a React child. This may happen if you return a Component instead of <Component /> from render. Or maybe you meant to call this function rather than return it

What other things do I need to do to make this work outside of fcc? I think it is very important to be able to do the challenges away from the fcc coding environment.

Your code so far

  1 import React from 'react';
  2 import ReactDOM from 'react-dom';
  3 
  4  
  5 const MyComponent = function() {
  6   return(
  7    <div>My Component</div>
  8   );
  9 }
  10 
  11 ReactDOM.render(MyComponent, document.getElementById("root"));

Your browser information:

User Agent is: Mozilla/5.0 (X11; Linux x86_64; rv:68.0) Gecko/20100101 Firefox/68.0.

Link to the challenge:

#2

render takes a JSX element as the first argument - so if you change render(MyComponent to render(<MyComponent/> it should work

#3

Wonderful. Thank you. :slight_smile:

Is it possible for the FCC code environment to behave more like a local installation of node, npm and create-react-app so that learners learn how to actually create an app from scratch with imports, rather than have the thing pretty much pre-configured, with what makes it work hidden behind the scenes?

I assume, based on no experience, that when people leave the FCC environment for a job, they would have to go through the full app creation process. If that is so, a crucial part of react coding is missing from the course, unless that comes later.

1 Like
#4