Avoid using string references

Docs > Code Analysis > Static Analysis Rules > Avoid using string references

Metadata

ID: jsx-react/no-string-refs

Language: JavaScript

Severity: Warning

Category: Best Practices

Description

String references are a legacy feature of React, use a reference callback instead.

Non-Compliant Code Examples

var Hello = createReactClass({
 render: function() {
  return <div ref="hello" a="foo" />;
 }
});
var Hello = createReactClass({
 render: function() {
  return <div ref="hello">Hello, world.</div>;
 }
});
var Hello = createReactClass({
  componentDidMount: function() {
    var component = this.refs.hello;
    // ...do something with component
  },
  render: function() {
    return <div ref="hello">Hello, world.</div>;
  }
});

Compliant Code Examples

var Hello = createReactClass({
  componentDidMount: function() {
    var component = this.hello;
    // ...do something with component
  },
  render() {
    return <div ref={(c) => { this.hello = c; }}>Hello, world.</div>;
  }
});