Question

195

How to resolve Uncaught TypeError: Failed to construct 'Comment': Please use the 'new' operat..... with respect to React JS?

rated 0 times [ 196] [ 1] / answers: 1 / hits: 45661 / 9 Years ago, thu, december 17, 2015, 12:00:00

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.

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

jaidyn

Add To Favorites

Follow

Total Points: 633

Total Questions: 102

Total Answers: 100

Location: Trinidad and Tobago

Member since Thu, Dec 1, 2022

2 Years ago

jaidyn questions

1 How to display images using props in react?

Fri, Feb 11, 22, 00:00, 2 Years ago

1 Uncaught TypeError: Cannot read properties of undefined (reading 'forEach')

Sun, Oct 3, 21, 00:00, 3 Years ago

1 How to get the < input>'s value?

Fri, May 14, 21, 00:00, 3 Years ago

1 How can I update multiple states at a time with useState hook?

Mon, Oct 12, 20, 00:00, 4 Years ago

1 How to show a bootstrap modal via an Angular-Service

Wed, Oct 30, 19, 00:00, 5 Years ago

View All

answered 9 Years ago lindsay · Accepted Answer

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

}