reactjs - this is not a function error on upgrade

Question

I am actually updating https://github.com/ezequiel/react-typeahead-component this component to be compatible to react >= 0.14 but while changing the methods I just run into one error:

Exchange this.getDOMnode for the reason it is deprecated with this.findDOMnode it occurs an error: Uncaught TypeError: this.findDOMNode is not a function

So I tried a lot about that React isn't binding this automatically in 0.14 to several functions. But it did not really helped me out.

module.exports = React.createClass({
  displayName: 'Aria Status',

  propTypes: process.env.NODE_ENV === 'production' ? {} : {
    message: React.PropTypes.string
  },

  componentDidMount: function() {
    var _this = this;

    _this.setTextContent(_this.props.message).bind(this);
  },

  componentDidUpdate: function() {
    var _this = this;

    _this.setTextContent(_this.props.message).bind(this);
  },

  render: function() {
    return (
      React.createElement("span", {
        role: "status",
        "aria-live": "polite",
        style: {
          left: '-9999px',
          position: 'absolute'
        }
      })
    );
  },

  setTextContent: function(textContent) {
    this.findDOMNode().textContent = textContent || '';
  }
});

Maybe someone can point me somewhere to go ahead!

Answer 1

In React v 0.14 findDOMNode is deprecated you can try use refs, like this

setTextContent: function(textContent) {
  this.refs.element.textContent = textContent || '';
}

or use ReactDOM.findDOMNode

setTextContent: function(textContent) {
  ReactDOM.findDOMNode(this).textContent =  textContent || '';
}

Example