Why React Render element not fired

Question

In my coding i have a html file in wwwroot with following codes.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>sample1</title>
    <script src="/Sample.js"></script>
</head>
<body>
    <h2>Sample1</h2>
<div id="combo1"></div>
</body>
</html>

and my Sample.js file contains follwing

export class CommentBox extends React.Component {
    render() {
        return (
            <div className="commentBox">Hello, world! I am a CommentBox.</div>
            <h2>hey hello</h2>
        );
    }
}

ReactDOM.render(<CommentBox />, document.getElementById('combo1'));

But i dont get the render element ...

anyone guide me ..

Thanks in adavance

check this answer for more details: [Invariant Violation: _registerComponent(…): Target container is not a DOM element](https://stackoverflow.com/questions/26566317/invariant-violation-registercomponent-target-container-is-not-a-dom-elem) — Mayank Shukla, Oct 30 '18 at 07:35
you also need to add the react, react-dom and babel cdn links, check this answer: [component is not rendering](https://stackoverflow.com/questions/43931538/how-to-load-es6-react-babel-code-in-html-with-cdn) — Mayank Shukla, Oct 30 '18 at 07:37
It needs a div to hook into, and so by the time it loads, the combo1 doc isn’t available yet. Also in React you can only render 1 container. So all of it has to be wrapped in another div. — born2gamble, Oct 30 '18 at 07:39

score 1 · Answer 1 · answered Oct 30 '18 at 07:35

1

There is an issue with your jsx in render()

Change it to like this (i.e. move h2 tag inside div)

render() {
  return (
    <div className="commentBox">Hello, world! I am a CommentBox.
      <h2>hey hello</h2>
    </div>    
  );
}

answered Oct 30 '18 at 07:35

Abdullah

2,015
2
20
29

score 0 · Answer 2 · answered Oct 30 '18 at 08:42

0

It's likely that the DOM is not ready yet. Try moving the script to just before the </body>.

I'm also assuming you've loaded React and ReactDOM packages already and are using Babel to process the JSX inside the render method.

If not take a look at create react app.

answered Oct 30 '18 at 08:42

Mike

16,690
2
19
25

Already tried bro.. Can you give any link sample project with local static data to load combo using reactjs in .netcore – Karthik Oct 30 '18 at 10:10
I believe .netcore is able to generate a react based project. Worth looking at that. – Mike Oct 30 '18 at 10:58

Why React Render element not fired

2 Answers2