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?

Thanks.

Your code so far

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

  
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:

//cdnjs.cloudflare.com/ajax/libs/react/0.13.0/react.min.js

So if anyone else is having issues, DO NOT USE this URL link:
https://cdnjs.cloudflare.com/ajax/libs/react/16.8.6/umd/react.production.min.js

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.