CODEWITHSUNDEEP
javascriptjqueryreactjs
Rahul Dagli
Rahul Dagli

Reputation: 4502

React - Uncaught TypeError: this.getDOMNode is not a function

I'm trying to apply styling through jquery in react component however i'm getting error Uncaught TypeError: this.getDOMNode is not a function

topicsVisited(arr){
         $(function() {
          $.each(arr, function(key, eachVisitedTopic) {
            console.log(eachVisitedTopic);
            $(this.getDOMNode()).find('.single-topic[data-topic-id="' + eachVisitedTopic + '"]').css({
              'background-color': 'red'
            });
          });
        });
      };

Upvotes: 1

Views: 5968

Answers (2)

John_West
John_West

Reputation: 2399

Try this

topicsVisited(arr){
         var ReactDom = require('react-dom');
         var self = this;
         $(function() {
          $.each(arr, function(key, eachVisitedTopic) {
            console.log(eachVisitedTopic);
            $(ReactDOM.findDOMNode(self)).find('.single-topic[data-topic-id="' + eachVisitedTopic + '"]').css({
              'background-color': 'red'
            });
          });
        });
      };

Upvotes: 1

Henrik Andersson
Henrik Andersson

Reputation: 47182

You need to bind your functions in order to use this properly.

topicsVisited(arr) {
    $(function() {
        $.each(arr, function(key, eachVisitedTopic) {
            console.log(eachVisitedTopic);
            $(this.getDOMNode()).find('.single-topic[data-topic-id="' + eachVisitedTopic + '"]').css({'background-color': 'red'});
        }.bind(this));
    }.bind(this);
}

or create a variable that references the correct this.

topicsVisited(arr) {
    var self = this;
    $(function() {
        $.each(arr, function(key, eachVisitedTopic) {
            console.log(eachVisitedTopic);
            $(self.getDOMNode()).find('.single-topic[data-topic-id="' + eachVisitedTopic + '"]').css({'background-color': 'red'});
        });
    };
}

Upvotes: 1

Related Questions