this.refs.something returns "undefined" this.refs.something returns "undefined" reactjs reactjs

this.refs.something returns "undefined"


Check that you are not accessing ref before the child component has been mounted. E.g. it doesn't work in componentWillMount. A different pattern which auto invokes ref related callback after the element has been mounted is this-

<div ref={(elem)=>(console.log(elem))}/>

You can use this notation to get mounted elements in deep nesting as well -

<div ref={this.props.onMounted}/>


The correct place to work with refs is inside specific React lifecycle methods e.g. ComponentDidMount, ComponentDidUpdate

You cannot reference refs from the render() method. Read more about the cautions of working with refs here.

If you move your console.log('REFS', this.refs.russian); call to ComponentDidMount or ComponentDidUpdate lifecycle methods (assuming you are on React >= 14) you should not get undefined as a result.

UPDATE: also refs will not work on stateless components per the caution link above


Update since React version 16.4

In your constructor method define your ref like this

constructor(props) {  super(props);  this.russian = React.createRef();}

In your render where you are using ref do this.

<input  name="russian"  ref={this.russian} // Proper way to assign ref in react ver 16.4/>  

For e.g if you want to have focus when component mounts do this

componentDidMount() {  console.log(this.russian);   this.russian.current.focus(); }

Reference Refs Documentation React