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.

Answer 1

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.

Answer 2

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.

Answer 3

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();