JavaScript code does not work after ReactDOM used

Question

I used react.js in my new project and found that javascript didn't work when I used ReactDOM to render class extended from React.Component

When script which fire alert() method is used as last it does not works. When I change order of scripts, they work.

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

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<script>
class HelloReact extends React.Component {
  render() {
    return React.createElement("div", null, React.createElement("h1", null, "Hello world 1!"));
  }
} 

ReactDOM.render(React.createElement(HelloReact, null), document.getElementById("hello"));
ReactDOM.render(React.createElement("h1", null, "Hello, world 2!"), document.getElementById('root'));
</script>
<script>alert("Hello");</script>

I would know is it normal (and I should not use javascript code after scripts with react code) or there is a bug in react library?

I was checking in Dev Tools and wasn't see any errors. I added files to github [ https://github.com/darekjk/reactjs_examples/tree/master/react-js-problem-20181231 ] to be sure I didn't make any error in copy/paste.

Open the web inspector in chrome and look at the javascript error — Andy Ray
– Andy Ray, Commented Dec 31, 2018 at 22:06
I pushed code to github. Please note that when I comment line: //ReactDOM.render(React.createElement(HelloReact, null), document.getElementById("hello")); code is working. — Darek
– Darek, Commented Jan 1, 2019 at 0:40

Marcell Toth · Accepted Answer · 2018-12-31 22:26:12Z

1

If you see javascript simply not executing, you 99% have a javascript error occuring before.

Interestingly your code does run on both my local machine and JsFiddle.

But if it still has problems in your specific scenario, start with opening up Chrome Dev Tools (F12) and look at the Console for any JavaScript errors.

answered Dec 31, 2018 at 22:26

Marcell Toth

3,6981 gold badge24 silver badges37 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Darek Over a year ago

I know, but the code is very simple and I don't see any error in debugger. Please see full code on github.

Community · Accepted Answer · 2020-06-20 09:12:55Z

0

Ouch, I spotted the actual error here, it's a funny one.

Take a look at this line: `<div id="hello"><div>`.

You meant to write <div id="hello"></div> but missed the slash.

This means that all your tags after that line are inside the hello div (and the other unnamed div that was supposed to be a closing tag). You can check it in the Elements view of Chrome Dev Tools.

This means that when ReactDOM renders your class into the hello div, it overwrites everything, because everything is inside the hello div, including itself and that other script tag. In the screenshot above you can see that all the script tags are missing.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Jan 1, 2019 at 10:28

Marcell Toth

3,6981 gold badge24 silver badges37 bronze badges

3 Comments

Darek Over a year ago

Thanks. :) I didn't work too much with Chrome Dev Tols and didn't know that it will not analyze html to check if all closing tags exists. I analyzed all divs in Dev Tools where all was closed :)

Marcell Toth Over a year ago

The trick is that Dev Tools will always show a valid HTML. Chrome tries to fix your errors and produce a valid DOM Tree, and the tools then display the DOM Tree to you not the original source. To check for errors use another tool, such as the good old W3C Validator: validator.w3.org

Darek Over a year ago

Yes, I know w3c validator, but tried to use something offline. I started to use tidy. It works fast.

Collectives™ on Stack Overflow

JavaScript code does not work after ReactDOM used

2 Answers 2

1 Comment

Take a look at this line: `<div id="hello"><div>`.

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Take a look at this line: <div id="hello"><div>.

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related

Take a look at this line: `<div id="hello"><div>`.