0

I am beginner with React and I have a such problem that when I use ReactDom.render there's no output in the browser. I am running the application with

npm start

My previous problem was an error that every time application was run I got:

Target is not a DOM element.

The issue was that index.js was invoked before index.html.

 index.js file

 document.addEventListener('game', function() {
 ReactDOM.render(
     "sss",
      document.getElementById('game')
      ); 
 });

How should look index.html file to run properly? I have here (index.html) only one line: 

<div id="game"></div>

I was using tutorial where index.html didn't contain any html or head tags. Regards

  • 1
    You're adding a listener for a `game` *event*, which doesn't exist. If you want to be able to add the script anywhere in the HTML, you need to wrap the `ReactDOM` line in `document.addEventListener('DOMContentLoaded', ...`: https://jsfiddle.net/khrismuc/e1w3vxko/ (note that this applies to *any* JS code that relies on existing HTML elements, and is not React specific) –  Jun 29 '19 at 09:27
  • should I copy index.css content? –  Jun 29 '19 at 09:39
  • Uncaught Invariant Violation: Target container is not a DOM element. at invariant (http://localhost:3000/static/js/0.chunk.js:5136:19) at Object.render (http://localhost:3000/static/js/0.chunk.js:27309:40) at HTMLDocument. (http://localhost:3000/static/js/main.chunk. –  Jun 29 '19 at 09:43
  • 1
    There's no point in posting the error message unless you also add the code you currently have to your question. And the error is not really React specific, you might want to read all of this: https://stackoverflow.com/questions/14028959/why-does-jquery-or-a-dom-method-such-as-getelementbyid-not-find-the-element –  Jun 29 '19 at 09:46
  • I added the code. Regards –  Jun 29 '19 at 09:52
  • 1
    There's is no `
    ` in your HTML, what exactly is `document.getElementById("game")` supposed to find?     –  Jun 29 '19 at 09:54
  • Thank you I have resolved the issue. There were a name collision. –  Jun 29 '19 at 10:08

0 Answers0