React v0.14.0 Do not access .getDOMNode()

[bobiblazeski]

I just switched to React 0.14.0 and I'm getting below warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by Typeahead.

componentWillMount this.onCity = function(city){ if (this.props.action) { Dispatcher.dispatch(this.props.action, { country: ReactDOM.findDOMNode(this.refs.country).value, city: city }); } }.bind(this); render (<Typeahead options={cities} maxVisible={2} onOptionSelected={this.onCity} value={this.props.city} />

[fmr]

Hi @bobiblazeski,

What happens if you change:

{
  country: ReactDOM.findDOMNode(this.refs.country).value,
...
}

to:

{
  country: this.refs.country.value
...
}

?

[bobiblazeski]

The error stays the same this.refs.country is select that doesn't have to do anything with react-typeahead.

Warning: ReactDOMComponent: Do not access .getDOMNode() of a DOM node; instead, use the node directly. This DOM node was rendered by Typeahead

Here's complete component

var R = require('ramda');
var React = require('react');
var ReactDOM =require('react-dom');
var Typeahead = require('react-typeahead').Typeahead;
var Dispatcher = require('../../Dispatcher');
var countries = require('../../../data/countries');
var maxVisible = 3;

var Location = module.exports = React.createClass({
  displayName: 'LocationFormField ',

  componentWillMount: function() {
    this.onCountry = function() {
      if (this.props.action) {
        Dispatcher.dispatch(this.props.action, {
          country: this.refs.country.value, //ReactDOM.findDOMNode(this.refs.country).value,
          city: ''
        });
      }
    }.bind(this);
    this.onCity = function(city){
      if (this.props.action) {
        Dispatcher.dispatch(this.props.action, {
          country: ReactDOM.findDOMNode(this.refs.country).value,
          city: city
        });
      }
    }.bind(this);
  },

  render: function() {
    var cities = getCities(this.props.country || 'XX');
    var autocomplete = R.isEmpty(cities)
      ? ".  .  ."
      : (<Typeahead options={cities}
            maxVisible={2}
            onOptionSelected={this.onCity}
            value={this.props.city}
            />
       );
    return (
      <div className="form-field">
        <label className="form-field__label">Located</label>
        <div className="form-field__value">
          <div className="selectcontainer">
            <select className="input-select"
                ref='country'
                value={this.props.country}
                onChange={this.onCountry}>
              {countries.map(function(d){
                return (<option key={d.code}  value={d.code}>{d.name}</option>);
              })}
            </select>
          </div>
          {autocomplete}
        </div>
      </div>
    );
  }
});

Location.propTypes = {
    country : React.PropTypes.string.isRequired,
    city : React.PropTypes.string
}
function getCities(code){
  var country = R.find(R.propEq('code',code),countries);
  return country ? country.cities : [];
}

The problem is in v0.14.0 not liking something that Typeahead is doing, I had the same warning with several other react components that need to be updated see below:

https://github.com/paramaggarwal/react-dropzone/issues/80 https://github.com/dozoisch/react-google-recaptcha/issues/11 https://github.com/linxtion/react-image-gallery/issues/15

[geekyme]

is there an npm release for this change? Last change detected here is one month ago.

[geekyme]

.... react-typeahead?

[fmoo]

I don't think anyone has submitted a PR to fix this yet, so there's no update for react-typeahead with the fix.

[thetimbanks]

@fmoo Doesn't this PR take care of this ticket? https://github.com/fmoo/react-typeahead/pull/136

[fmoo]

Wow, I totally missed that PR.

Do you have any thoughts on bumping minor version for this so I can do a release with this and #138?

Are there any other PRs you'd like to have in the next release as well?

[thetimbanks]

@fmoo I would say you could release this as 1.1.5 and the other as 1.2 since it has breaking changes in it.

[SylarRuby]

Just did an update and getting same warnings. Any news on this?

[fmoo]

@SylarRuby - I just pushed 1.1.5 to npm. If you update, the new react warnings from 0.14.0 will go away.

[bobiblazeski]

Many thanks.

[SylarRuby]

@fmoo Thanks. Solved.