Component not rendering

JavaScript
1

Hello! I’m working on my first front end libraries project, and ran into some trouble with rendering my components. To test out if I was doing it properly, I created this code to see if it passed the first test of the random quote machine, but it didn’t and I’ve been trying to figure out why for hours now.

class RQMApp extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      <div id="quote-box">
        <p>bklkkllklklk</p>
      </div>
    );
  }
}

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

What error message shows up in the browser console?

3

There isn’t any error that shows up, but nothing is printed out, and it fails the test.

5

If it’s this one: https://codepen.io/mhabte/pen/eYOWrxx

You need to load react and react-dom libraries and provide a div with the id ‘root’ for the app to load into.

6

Here it is:https://codepen.io/mhabte/pen/eYOWrxx

7

I imported react and react-dom previously, and nothing happened.
I’m not completely sure I understand what you mean by providing a div with the id ‘root’.

8

In your HTML:

<div id='root'></div>

When I added that, and added the 2 react libraries to your code pen, it worked.

9

I was looking at the drum machine sample project provided, and the only thing they have
in their html is #root, so why is it that they don’t need to add a div element or import anything to get their code to run properly?
Also, maybe I’m not importing them right, but this is what I have, and it still isn’t working properly.

import React from 'react';
import ReactDOM from 'react-dom';

class RQMApp extends React.Component {
  constructor(props) {
    super(props);
  }
  
  render() {
    return (
      
      <div id="wrapper">
        <p>bklkkllklklk</p>
      </div>
    );
  }
}

const root = document.getElementById('app-container');

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

You still need to load the libraries into codepen.

In the JS window select the cog, then search for and add both react and react-dom.

2 Likes
11

Thank you so much! Not only did I need to add both of them, but I also needed to remove the import statements I had at the top of my js.

1 Like