this.refs.something returns "undefined"

javascript reactjs react-dom react-ref
John Doe picture John Doe · Feb 5, 2016 · Viewed 80.5k times · Source

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

    <div ref="russian" ...>
       ...
    </div>

I want to access the DOM element properties like offset... or something. However, I keep getting undefined and I haven't the faintest idea why. After some searching it's clear that refs are only applicable to one file but I'm not using this anywhere besides this one page. I'm saying this to log it:

console.log('REFS', this.refs.russian);

What could be causing this?

Answer

hazardous picture hazardous · Feb 5, 2016

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}/>

Related questions

What's the difference between hydrate() and render() in React 16?

I've read the documentation, but I didn't really understand the difference between hydrate() and render() in React 16. I know hydrate() is used to combine SSR and client-side rendering. Can someone explain what is hydrating and then what is the difference …

Read More
What does registerServiceWorker do in React JS?

I'm a newbie in React and I was wondering what is the purpose of registerServiceWorker() in the following code? import React from 'react'; import ReactDOM from 'react-dom'; import App from './App'; import registerServiceWorker from './registerServiceWorker'; ReactDOM.render(<…

Read More
Should I use ref or findDOMNode to get react root dom node of an element?

I'm on a situation where I want to make some dom-node size calculations (top, bottom and size properties of the rendered DOM node) What I'm doing right now, on the componentDidUpdate method is to call findDOMNode on this: componentDidUpdate() { var …

Read More