Using React in Codepen but not getting anything

Question

I'm new to React and Codepen but just started trying it out. Somehow the examples that I copied from elsewhere that I know should work doesn't give me anything in Codepen. Thought I must've set up things wrong I ended up forking other people's code on Codepen and trying my code there and it still doesn't work.

Here's an example of what I'm trying: https://codepen.io/hensy8586/pen/MWyoGLR. It's a simple code that should return three clickable buttons but I see nothing in the output window other than blank, and I'm not getting any error messages.

There are a few other error messages I encountered that confuse me:

I've also seen (sometimes) an error message saying I should import React and ReactDOM but I've seen plenty other codes that work without one.
I also encountered error that says Uncaught ReferenceError: require is not defined, which goes away after I add require.js script. But I've noticed many other code in Codepen that runs okay without require.js added.

I appreciate if someone can help me understand these better. Thanks.

In my opinion the best web tool for React is codesandbox.io. Try there, it always shows you all errors and helps to add extra dependencies. — Champion
– Champion, Commented Aug 30, 2020 at 7:45

Kostas Minaidis · Accepted Answer · 2020-08-30 00:36:06Z

3

CHANGE THIS:

function Clicker({ handleClick }) {
  return <div>
    <button onClick={(e) => {handleClick('A');}}>A</button>
    <button onClick={(e) => {handleClick('B');}}>B</button>
    <button onClick={(e) => {handleClick('C');}}>C</button>
  </div>;
}

ReactDOM.render(<Clicker handleClick={(letter) => 
    {console.log(`${letter} clicked`);}} />,
  document.getElementById('root');

TO THIS:

function Clicker({ handleClick }) {
  return <div>
    <button onClick={(e) => {handleClick('A');}}>A</button>
    <button onClick={(e) => {handleClick('B');}}>B</button>
    <button onClick={(e) => {handleClick('C');}}>C</button>
  </div>;
}

ReactDOM.render(
  <Clicker handleClick={(letter) => 
    {console.log(`${letter} clicked`);}} />
  ,document.getElementById('root')
); //<-- Oops!

Culprit: Missing ); at the end.

Working Codepen

I suggest you follow this guide to set up a working React web page or use create-react-app.

Both ways, will help you better debug errors and work in an environment where no other framework, libraries or code runs, e.g. Codepen. This is the preferred way IMHO for non-experienced React users.

Also, prefer the development versions of the library instead of the production version. Switch to the production version, only when your app is tested and ready for deployment.

edited Aug 30, 2020 at 0:36

answered Aug 30, 2020 at 0:29

Kostas Minaidis

5,6814 gold badges21 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hensy Over a year ago

Thanks for the quick answer! My stupidity again. lol. Interesting how Codepen would have all kinds of errors and not telling me there was a syntax error. Makes sense on the best practice.

Collectives™ on Stack Overflow

Using React in Codepen but not getting anything

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related