React component does not render - Front End Development Libraries Projects - Build a Markdown Previewer

JavaScript
1

Tell us what’s happening:
I am trying to put some React in the JavaScript, however the React component does not render, even though I’ve included the necessary packages. I tried to render the React component using the line

ReactDOM.render(<MyComponent />, document.getElementById('root'));

however it did not render the desired output.
In the output window, I would expect to see “freeCodeCamp” with heading 1 formatting, but the text does not even appear.
The JavaScript code that I included is based on the “Render State in the User Interface” challenge as I know that this code works.
Thank you in advance for any help you can offer.

Your code so far
Linked in another post.

Your browser information:

User Agent is: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:109.0) Gecko/20100101 Firefox/115.0

Challenge: Front End Development Libraries Projects - Build a Markdown Previewer

Link to the challenge:

2

Link to the code: https://codepen.io/naoyaok/pen/xxQXyBE

3

You can’t import React like that. Use the Codepen JS settings.

  1. Move the rendering code down into the JS section at the bottom of the code.

  2. Remove everything in the HTML section and add a single element with the root id.

  3. Add the React imports to the JS section at the top.

HTML

<div id="root"></div>

JS

import React from 'https://esm.sh/react@18.2.0'
import ReactDOM from 'https://esm.sh/react-dom@18.2.0'

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      name: 'freeCodeCamp'
    }
  }
  render() {
    return (
      <div>
        { /* Change code below this line */ }
        <h1>{this.state.name}</h1>
        { /* Change code above this line */ }
      </div>
    );
  }
};

ReactDOM.render(<MyComponent />, document.getElementById('root'));