this.refs.something returns “undefined”

Question

I have an element with a ref that is defined and ends up getting rendered into the page :

    

       ...
    <         


        
      

Answer 1

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