Using React on CodePen

How do I get react to work on the codePen JS editor? I tried adding react to the JS file directly from the settings but after using ReactDOM.render() it doesn’t still show on the result page

you also need to select Babel as preprocessor

thats the default preprocessor of JS on codePen

it’s not, the default is “None”

but it’s difficult to know what’s wrong without seeing your project

Okay…thanks. This is my code though

HTML

<script src="https://cdn.freecodecamp.org/testable-projects-fcc/v1/bundle.js"></script>

<html lang="en">
  <body>
    <div id="quote-box">
      
    </div>
  </body>
</html>

JS

//React Code
import 'bootstrap/dist/css/bootstrap.min.css';

const quotes = {[Certain things catch your eye, but pursue only those that capture the heart.,You miss 100% of the shots you don’t take.,Life shrinks or expands in proportion to one’s courage.,You can’t fall if you don’t climb. But there’s no joy in living your whole life on the ground.,There are no traffic jams along the extra mile.]};
const authors = {[Ancient Indian Proverb,Wayne Gretzky,Anais Nin,Unknown,Roger Staubach]};

class App extends React.Component{
  constructor(props){
    super(props);
    this.handleClick = this.handleClick.bind(this);
  }
  handleClick(){
    
  }
  render(){
    return(
    <div>
      <div id="text">{quotes[rand]}</div>
      <div id="author">- {authors[rand]}</div>
      <button id="new-quote">New Quote</button>
      <a id="tweet-quote"><button></button></a>
    </div>
    );
  }
};

ReactDOM.render(<App />, document.getElementById("quote-box"));

the JS part isn’t done yet but its still supposed to show the New Quote button