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

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-

(console.log(elem))}/>

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