Can't use React.findDOMNode function

Question

For some reason, I'm not able to use React.findDOMNode function. Browser complains about type error, saying React.findDOMNode is not a function. This is the code where this happens:

var React = require('react');
var Backbone = require('backbone');
var Car = require('models/car');
var NewCarForm = React.createClass({
  handleSubmit: function(e) {
    e.preventDefault();
    var brand = React.findDOMNode(this.refs.brand).value.trim();
   ...
    this.props.handleNewCar(new Car({brand: brand, model:model,   name:name, kmTraveled:odometer, litresSpent:litres}));
    return;
  },
  render: function() {
    console.log("Inside NewCarForm");
    return (
      <form className="contentSection" onSubmit={this.handleSubmit}>
        <input type="text" placeholder="Car Brand" ref="brand" />
       ...
        <input type="submit" value="Post" />
      </form>
    );
  }
});
module.exports = NewCarForm;

This is the only module where I try to use this function. The rest of React works fine, so I have no idea what could be the problem here.

try printing out "React" and "React.version" to make sure you're not pulling in multiple versions of react, because there's no other real reason why you wouldn't have it. — kakigoori, Apr 05 '15 at 22:29
Use ReactDOM.findDOMNode as explained [here](http://stackoverflow.com/questions/33031516/reactjs-finddomnode-and-getdomnode-are-not-functions/33031619#33031619). — upg, Apr 17 '16 at 07:28

score 39 · Answer 1 · answered Apr 14 '16 at 13:50

39

In React 15 (and possibly some earlier versions, I'm not sure) you don't need findDOMNode to use refs at all:

this.refs.brand.value

is sufficient.

answered Apr 14 '16 at 13:50

Roman Starkov

59,298
38
251
324

Perfect Bravo!! – Umer Farooq Nov 16 '16 at 21:44
This should be the accepted... since things have changed – EugenSunic Apr 21 '17 at 10:09
may hold true for a plain html form elememt , but is still required if the ref if used inside a React Component – joedotnot May 15 '18 at 05:13

score 14 · Answer 2 · answered Apr 04 '15 at 09:23

14

React.findDOMNode(component) was introduced in React 0.13.0 as a replacement for component.getDOMNode().

Make sure that you have React 0.13.1 installed. If you're using npm, you can run npm view react version to check which version of React is currently installed.

answered Apr 04 '15 at 09:23

Alexandre Kirszenberg

35,938
10
88
72

1

React version is 0.13.1. I will try the getDOMNode() function however. – LazyDal Apr 04 '15 at 15:51

score 5 · Answer 3 · edited Aug 01 '17 at 05:27

5

The findDOMNode method has moved from react module to the react-dom module.

So you have import or require the ReactDOM from react-dom module then replace

var brand = React.findDOMNode(this.refs.brand).value.trim();

With

var ReactDOM = require('react-dom');
var brand = ReactDOM.findDOMNode(this.refs.brand).value.trim();

edited Aug 01 '17 at 05:27

Rob

26,989
16
82
98

answered Aug 01 '17 at 05:18

Nahid

2,911
1
20
17

score 2 · Answer 4 · answered Sep 26 '16 at 14:38

I would have commented on @romkyns answer but i don't have the rep.

So, I have been following a tutorial:

https://spring.io/blog/2015/09/15/react-js-and-spring-data-rest-part-2-hypermedia

By changing the content from the newest version of the project on github. There was an error both in the code that relates to the answer I also voted up, but realized there was a mistake.

So you must replace React.findDOMNode by ReactDOM.findDOMNode and not by deleting findDOMNode as you stated.

I am not sure if this is due to a new version of Reactjs but this gave me the awaited result.

Woops, I did not see the comment from @upg – Santa Clauze Sep 26 '16 at 14:39 — Santa Clauze, Sep 26 '16 at 14:39

Can't use React.findDOMNode function

4 Answers4

Linked

Related