14

I have a home.jsp where within body

<body>
    <script type="text/babel" src="../resources/scripts/example.js"></script>
     <a href="javascript:Comment();">News</a>
</body>

In a separate example.js, I have the following

alert("I am coming here ... BEEP");

var Comment = React.createClass({
      loadCommentsFromServer: function() {
        $.ajax({
          url: this.props.url,
          dataType: 'json',
          cache: false,
          success: function(data) {
            this.setState({data: data});
          }.bind(this),
          error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
          }.bind(this)
        });
      },
      getInitialState: function() {
        return {data: []};
      },
      componentDidMount: function() {
        this.loadCommentsFromServer();
        setInterval(this.loadCommentsFromServer, this.props.pollInterval);
      },
      render: function() {
        return (
          <div className="comment">       
            <Comment data={this.state.data} />
            <span dangerouslySetInnerHTML={{__html: data}} />
          </div>
        );      
      }
    });

    ReactDOM.render(
      <Comment url="/workingUrl" pollInterval={2000} />,
      document.getElementById('content')
    );

I am getting the following error in Chrome console.

Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' 
operator, this DOM object constructor cannot be called as a function.

I have added React js tags in home.jsp file.

How to fix this? Please help me.

Improve this question

3 Answers 3

Reset to default
46

Maybe this will help someone who had the same issue as me...I simply forgot to import the component I was trying to render:

import { Comment } from './comment'
Improve this answer
2
  • 4
    Yes it did help! Interestingly, eslint didn't pick up on the missing import.
    – dj18
    Commented Dec 10, 2018 at 17:31
  • Lol, yes, this also helped me :facepalm:
    – righdforsa
    Commented Mar 25, 2022 at 22:23
10

You cannot call React Component <Comment/> by Comment(). The error requests you to create an instance of the Comment class i.e. something like this var comment = new Comment(). However, in your problem we do not need this.

<body>
  <a href="javascript:RenderComment();">News</a>
  <div id="content"> </div>
</body>

Your React Component <Comment/> should be independent and will be used as an argument to ReactDOM.render(...). Hence the Comment should not have ReactDOM.render(...) function inside it. Also, the anchor element click must not call Comment() as it is not a function which does rendering but rather a Class whose instance is mounted on the DOM. On clicking the <a/> tag, a RenderComment() should be called which will in turn render the <Comment/> component.

var RenderComment = function RenderComment() {
  ReactDOM.render(React.createElement(
                    "div", null, " ", Comment, " "
                  ), document.getElementById("content"));
};

Here, we are rendering your <Comment/> component which you defined using React.createClass.

var Comment = React.createClass({
 // Your component functions and render() method
 // No ReactDOM.render() method here
}
Improve this answer
14
  • 1) So RenderComment is a normal JS function , right? If so, can I do like this function RenderComment(){ ReactDOM.render(<div> {Comment} </div>, document.getElementById("content")); } 2) Also Why <div>{Comment}</div>?
    – sofs1
    Commented Dec 17, 2015 at 7:14
  • Yes RenderComment() is a normal JS function. In fact, to render React, a normal JS function like this is always required. Usually it is done when the document loads. In your case, it is being done on a button click. That's the only difference.
    – Naisheel Verdhan
    Commented Dec 17, 2015 at 7:15
  • I am getting VM233:1 Uncaught ReferenceError: RenderComment is not defined(anonymous function) @ VM233:1
    – sofs1
    Commented Dec 17, 2015 at 7:33
  • Also please answer this 2) Also Why <div>{Comment}</div>?
    – sofs1
    Commented Dec 17, 2015 at 7:39
  • Call the ReactDOM.render(...) function from within a <script type="text/javascript" .../> not "text/babel"
    – Naisheel Verdhan
    Commented Dec 17, 2015 at 7:46
1

Agreed By above answer of Troy Carlson. I faced similar issue in React native project. I have used few built in component(React native) inside but didn't import it. After correctly importing all, error was gone

import {
    FlatList,
    SafeAreaView,
    Text,
    View,
    ...
    } from "react-native";
Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.