Build a Random Quote Machine - React Not Working

Tell us what’s happening:

I’m trying to complete this project using React, but I’m stuck on the very first step. I can’t get a simple heading to render.

I’ve entered the URL for react and react-dom in the pen settings. the import statements that I’ve commented out don’t seem to make a difference.

I have a <div> element with id = "quote" in HTML so that ReactDOM.render can drop the react component in there, and I’ve set the target node to that Id.

Why is nothing showing up?


Your code so far

//import React from 'react';
//import ReactDom from 'react-dom';
class RandomQuote extends React.component {
    /*this.state: {
    return (
    <div id = "quote-box">
        <h1>Hey hey!</h1>

ReactDOM.render(<RandomQuote />, document.getElementById('quote'));

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/75.0.3770.142 Safari/537.36.

Link to the challenge:

1 Like

I’ve resolved the darn issue of getting react to work in codepen.

The URL link to react that codepen supplies to you in the search bar DOESN’T WORK!

I found one that does:


So if anyone else is having issues, DO NOT USE this URL link:

How silly. Why would they supply us with an external script that doesn’t work?

1 Like

I was having exactly the same problem! Thanks a lot!!!

1 Like

I’m glad the solution works for you as well. Codepen should really look into fixing that issue.