this.refs.something returns "undefined"

Question

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?

this.refs would be the string "russian" (assuming you're in the right scope), not an object, so it wouldn't have a property of "russian" — I wrestled a bear once., Feb 05 '16 at 17:28
@Pamblam in reactjs ref is a reference to an element dom. It becomes accessible as an object — Tatarin, Feb 05 '16 at 17:32
Also it would help to see more code. Ref is only accessible to the object it binds to. In most cases you would have to bind it to element that its coming from — Tatarin, Feb 05 '16 at 17:34
ref is not traditional scope binding, it's owner-ownee relationship. — hazardous, Feb 05 '16 at 17:40
What version of React? Prior to 14, you had to use `refs.getDOMNode()` IIRC — Evan Davis, Feb 05 '16 at 17:47

score 43 · Answer 1 · edited Apr 05 '19 at 15:54

43

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

edited Apr 05 '19 at 15:54

Ikhlak S.

8,578
10
57
77

answered Feb 05 '16 at 17:45

hazardous

10,627
2
40
52

score 36 · Accepted Answer · answered Feb 10 '16 at 01:37

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

score 9 · Answer 3 · answered Sep 02 '18 at 11:10

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

score 0 · Answer 4 · answered Mar 21 '19 at 21:21

0

I was having a similar issue in my form validation methods, trying to assign this.ref.current.reportValidity()

Writing the method I was doing this in as validate = () => {} instead of validate() {} helped me out, but I'm not totally sure why exactly, just something I remembered from habits I had in my past work experience that gave me this. Hope it helps and could someone kindly clarify this answer with why this might work exactly.

answered Mar 21 '19 at 21:21

Statik

11
1

use an arrow function to wrap around an event handler, This is equivalent to calling .bind(Binding methods helps ensure that the second snippet works the same way as the first one) When you need to invoke a function prop with an argument, you should always specify a fat arrow function that invokes the prop, React will evaluate the expression when the component renders its content, which will invoke the prop even though the user hasn’t clicked the button element. This is rarely the intended effect and can cause unexpected behaviors or produce an error. – Reza Jul 08 '19 at 15:20

score 0 · Answer 5 · answered Apr 09 '19 at 16:59

0

If you are exporting class withStyle, please remove and export default nomally.

answered Apr 09 '19 at 16:59

vũ việt hoàng vũ

1
2

score 0 · Answer 6 · edited Jan 10 '20 at 10:50

0

Instead of putting your Console.log inside the function example(){...} you should put it inside:

example=()=>{....}

edited Jan 10 '20 at 10:50

404

8,022
2
27
47

answered Jan 10 '20 at 09:45

Maykel

19
2

why do it this way? – Jamie Marshall Mar 06 '22 at 23:58

this.refs.something returns "undefined"

6 Answers6

Linked