Random Quote Machine - Having Trouble with Setting Up JSX on CodePen

1

I have this CodePen for this right now, and I’m loading React, ReactDOM and JSX by adding URLs in settings. I added these URLs under JS settings for that:

https://unpkg.com/react@16/umd/react.development.js
https://unpkg.com/react-dom@16/umd/react-dom.development.js
https://unpkg.com/babel-standalone@6/babel.min.js

I was planning to put just the container div in the HTML and render the stuff nested inside of it through render in the component’s class definition, but I’m not sure if doing it like this is working:

class RandomQuoteApp extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return <p id="text"></p>
      <p id="author"></p>
      <button id="new-quote">New Quote</button>
      <a href="https://twitter.com/intent/tweet" id="tweet-quote">Tweet Quote</a>
  }
}

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

I was getting an error saying that “<” is an unexpected token. And only the first test for Technology Stack, the first test for Content and the first test for Layout are passing and the rest are failing.

What am I doing wrong here?

2

With babel, you need to use it as a preprocessor, so you won’t import the library. Go to settings -> JS -> JavaScript Preprocessor and select “Babel”.

3

Thanks.

How do I get the stuff to show up inside the div with id quote-box now, then? Is there something wrong with my code?

4

Two things:

If you don’t already have it, in your HTML, you’ll need:

<div id="quote-box"></div>

for it to target.

Next, there is a problem with your code. When a function returns JSX, it can only return one element. Your code:

    return <p id="text"></p>
      <p id="author"></p>
      <button id="new-quote">New Quote</button>
      <a href="https://twitter.com/intent/tweet" id="tweet-quote">Tweet Quote</a>

is trying to return 4. The most common solution would be to wrap it in a div:

    return (
      <div>
        <p id="text"></p>
        <p id="author"></p>
        <button id="new-quote">New Quote</button>
        <a href="https://twitter.com/intent/tweet" id="tweet-quote">Tweet Quote</a>
      </div>
    );

Now it’s one element with 4 sub elements - but there is just one root element. You can see this all work in this pen here.

5

Thanks. It works up until that point now.

So how can I include Redux into CodePen?

6

Never mind. I got Redux included.