Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

ReactJS findDOMNode and getDOMNode are not functions

I'm building a web-app with ReactJS and Flux and I'm trying to get the node of my current div using the method findDOMNode and I get the next error:

Uncaught TypeError: React.findDOMNode is not a function

So, I tried to use getDOMNode and I get the very same error:

Uncaught TypeError: React.getDOMNode is not a function

I'm using npm to build the JS, the code where I use these methods:

var React = require('react');
var stores = require('../stores');
var MessagesUserContainer = require('./messageusercontainer');
var ChatStore = stores.ChatStore;
var owner = stores.getOwner();

var MessagesList = React.createClass({

    getInitialState: function(){
        return {'muc': []};
    },
    componentDidUpdate: function(){
        var node = React.findDOMNode(this); //Error here
        node.scrollTop = node.scrollHeight;
    },
    render: function(){
        return (
                <div className="chatScroll">
                    {this.state.muc}
                </div>
            )
    }
});

module.exports = MessagesList;

ReactJS verion: 0.14.0

EDIT

As pointed out in the answers, the DOM library as of v0.14.0 is out of the React core, so I made a few changes to my code:

var React = require('react');
var ReactDOM = require('react-dom');
var stores = require('../stores');
var MessagesUserContainer = require('./messageusercontainer');
var ChatStore = stores.ChatStore;
var owner = stores.getOwner();

var MessagesList = React.createClass({

    getInitialState: function(){
        return {'muc': []};
    },
    componentDidUpdate: function(){
        var node = ReactDOM.findDOMNode(this);
        node.scrollTop = node.scrollHeight;
    },
    render: function(){
        return (
                <div className="chatScroll">
                    {this.state.muc}
                </div>
            )
    }
});

module.exports = MessagesList;

But I got another problem:

Uncaught Error: Invariant Violation: findDOMNode was called on an unmounted component.
like image 493
Victor Castillo Torres Avatar asked Oct 09 '15 06:10

Victor Castillo Torres


People also ask

What is difference between react and react DOM?

React library is responsible for creating views and ReactDOM library is responsible to actually render UI in the browser. Include these two libraries before your main JavaScript file. While learning How React works, we'll build a small application using react and ReactDOM.

What is findDOMNode?

findDOMNode is an escape hatch used to access the underlying DOM node. In most cases, use of this escape hatch is discouraged because it pierces the component abstraction. It has been deprecated in StrictMode .

Which component do we have to pass to the ReactDOM render () method?

render() The first argument is the element or component we want to render, and the second argument is the HTML element (the target node) to which we want to append it. Generally, when we create our project with create-react-app , it gives us a div with the id of a root inside index.

How do I get rid of the DOM element in react?

Remove stand-alone element onclick in ReactAttach an event handler to the onClick event of the element. In the event handler, negate the value of the visibility state to remove the element from the DOM.


2 Answers

Changed in latest React:

ReactDOM.findDOMNode

https://facebook.github.io/react/docs/top-level-api.html#reactdom.finddomnode

It is in the react-dom package. Note that ReactDOMServer has also been moved into another package. Probably in preparation for React related platform-specific APIs (such as React native).

To import/ require the package:

import ReactDOM from "react-dom";

or

 var ReactDOM = require('react-dom').
like image 144
user120242 Avatar answered Oct 20 '22 21:10

user120242


In react v0.14 DOM library has been moved from React.js itself. There are some BC changes, but if you wrote your code in a proper way then changes won't be painful. Please read here for full overview: https://facebook.github.io/react/blog/#major-changes

like image 3
Pawel Avatar answered Oct 20 '22 20:10

Pawel