Codes not working

programming web dev
1

Hi I’ve been practised from the Learn React: Hands-On Guide to Building Web Applications Using React and Redux (2nd Edition).
I am currently viewing the chapter 3 on the component. When I try to follow through and see the output on browser nothing seems appear. Any idea why? I’m a starter, please bear with me.

Here is my code:

    class HelloWorld extends React.Component { render() { return
    <p>Hello, componentized world!</p>  } } ReactDOM.render(
    <div>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
        <HelloWorld/>
    </div>, document.querySelector("#container"));
</script>
2

Hi Ramzy - welcome to the forums! :slight_smile:

Can you post your full code? I’m only seeing bits and pieces in the response. Also, if you bring up your browser developer tools, do you see any error showing up?

Thanks,
Kirupa

4

Hi Kirupa, had the same problem. Any help you could offer be much appreciated.

Attached is my code:

<!DOCTYPE html>
<html>
 
<head>
  <meta charset="utf-8">
  <title>React! React! React!</title>
  <script src="https://unpkg.com/react@16/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/[email protected]/babel.min.js"></script>
  <style>
      #container {
        padding: 50px;
        background-color: #7f3621;    
      }
      #container h3 {
        font-size: 144px;
        font-family: sans-serif;
        color: #0080A8;
      }
  </style>
</head>
 
<body>
    <script type="text/babel">
    var destination = document.querySelector("#container");
    ReactDOM.render(
      <div id="container">
        <h3>Patrick</h3>
        <h3>Patrick</h3>
        <h3>Patrick</h3>
      </div>,
      destination
    );
    </script>
</body>
</html>

Error I got as follows:

react-dom.development.js:27710 Uncaught Error: Target container is not a DOM element.
    at Object.render (react-dom.development.js:27710)
    at <anonymous>:4:10
    at n (babel.min.js:12)
    at r (babel.min.js:12)
    at o (babel.min.js:12)
    at u (babel.min.js:12)
    at E (babel.min.js:1)
5

@jopeters you’re missing a div element. Add this above the <script> tag:

<div id="container"></div>

This is what document.querySelector("#container"); is looking for and assigns to destination, what will be the “target container”. When not found, destination becomes null and React can’t render to it.