Skip to main content

react/noStringRefs

prevent string definitions for references and prevent referencing this.refs

ESLint Equivalent: no-string-refs

Examples

Invalid

class Hello extends React.Component {
	componentDidMount() {
		const component = this.refs.hello;
	}

	render() {
		return <div>Hello {this.props.name}</div>;
	}
}

 file.tsx:3:20 lint/react/noStringRefs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Using this.refs is a deprecated pattern.

    1class Hello extends React.Component {
    2  componentDidMount() {
  > 3    const component = this.refs.hello;
                           ^^^^^^^^^
    4  }

  See 
    https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
     for more information.


class Hello extends React.Component {
	render() {
		return <div ref='hello'>Hello {this.props.name}</div>;
	}
}

 file.tsx:3:14 lint/react/noStringRefs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Using string literals in ref attributes is a deprecated pattern.

    1class Hello extends React.Component {
    2  render() {
  > 3    return <div ref='hello'>Hello {this.props.name}</div>;
                     ^^^^^^^^^^^
    4  }
    5}

  See 
    https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
     for more information.


class Hello extends React.Component {
	render() {
		return <div ref={${"`"}hello${"`"}}>Hello {this.props.name}</div>;
	}
}

 file.tsx:3:18 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Unclosed jsx expression container

    1class Hello extends React.Component {
    2  render() {
  > 3    return <div ref={${"`"}hello${"`"}}>Hello {this.props.name}</
          div>;
         ^
    4  }
    5}

  We expected to find the closing character } here

    1class Hello extends React.Component {
    2  render() {
  > 3    return <div ref={${"`"}hello${"`"}}>Hello {this.props.name}</
          div>;
         ^
    4  }
    5}


class Hello extends React.Component {
	render() {
		return <div ref={'hello'}>Hello {this.props.name}</div>;
	}
}

 file.tsx:3:14 lint/react/noStringRefs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Using string literals in ref attributes is a deprecated pattern.

    1class Hello extends React.Component {
    2  render() {
  > 3    return <div ref={'hello'}>Hello {this.props.name}</div>;
                     ^^^^^^^^^^^^^
    4  }
    5}

  See 
    https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
     for more information.


class Hello extends React.Component {
	render() {
		return <div ref={${"`"}hello${"$"}{index}${"`"}>Hello {this.props.name}</div>;
	}
}

 file.tsx:3:18 parse(js) ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Unclosed jsx expression container

    1class Hello extends React.Component {
    2  render() {
  > 3    return <div ref={${"`"}hello${"$"}{index}${"`"}>Hello {this.
    props.name}</div>;
     ^
    4  }
    5}

  We expected to find the closing character } here

    1class Hello extends React.Component {
    2  render() {
  > 3    return <div ref={${"`"}hello${"$"}{index}${"`"}>Hello {this.
    props.name}</div>;
     ^
    4  }
    5}


class Hello extends React.Component {
	componentDidMount() {
		const component = this.refs.hello;
	}

	render() {
		return <div ref='hello'>Hello {this.props.name}</div>;
	}
}

 file.tsx:3:20 lint/react/noStringRefs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Using this.refs is a deprecated pattern.

    1class Hello extends React.Component {
    2  componentDidMount() {
  > 3    const component = this.refs.hello;
                           ^^^^^^^^^
    4  }

  See 
    https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
     for more information.

 file.tsx:7:14 lint/react/noStringRefs ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  Using string literals in ref attributes is a deprecated pattern.

    6  render() {
  > 7    return <div ref='hello'>Hello {this.props.name}</div>;
                     ^^^^^^^^^^^
    8  }
    9}

  See 
    https://reactjs.org/docs/refs-and-the-dom.html#legacy-api-string-refs
     for more information.

Valid

class Hello extends React.Component {
	componentDidMount() {
		const component = this.hello;
	}

	render() {
		return <div ref={c => this.hello = c}>Hello {this.props.name}</div>;
	}
}