Dynamically creating refs without strings

Question

EDIT: We're using React 16.2.0, which is relevant to the question (see this answer).

So far as I can tell, this is the accepted way to create a ref (at least for our version of react):

<div ref={(r) => { this.theRef = r; }}>Hello!</div>

And then it can be used something like this:

componentDidMount() {
  if (this.theRef) {
    window.addEventListener('scroll', this.handleScroll);
  }
}

This works fine. However, if I want to create a dynamically named ref, say as part of a loop, how do I go about naming the ref?

Put in now obsolete terms, I would like something along these lines:

<div ref="{refName}">Hello!</div>

Thanks!

The post title is misleading. Please update. – Bhojendra Rauniyar Aug 29 '18 at 19:43 — Bhojendra Rauniyar, Aug 29 '18 at 19:43

score 1 · Answer 1 · answered Aug 29 '18 at 19:20

1

Try just:

<div ref={refName}>Hello!</div>

answered Aug 29 '18 at 19:20

nbwoodward

2,816
1
16
24

"using string literals in ref attributes is depreciated." [see here](https://stackoverflow.com/questions/43873511/deprecation-warning-using-this-refs) – crowhill Aug 29 '18 at 19:27

score 1 · Answer 2 · answered Aug 29 '18 at 19:38

1

For a map you need a key, so maybe you could just use that key to map to an object? Like so:

this.myRefs = {}

doSomethingToRef = (key) => {
  this.myRefs[key].doSomething()
}

return (
  myValues.map(value => (
    <div key={value.key} ref = {r => {this.myRefs[value.key] = r}}>{...}</div>
  ))
)

answered Aug 29 '18 at 19:38

ageoff

2,798
2
24
39

This was my initial thought and it does work. Thank you. – crowhill Aug 29 '18 at 19:48

Bhojendra Rauniyar · Answer 3 · 2018-08-29T19:39:51.197

0

Use ref like this:

Define the refName inside the class constructor:

this.refName = React.createRef()

Assign the ref in your element:

<div ref={this.refName} id="ref-name">Hello!</div>

To access the refName, use current:

this.refName.current

Example:

if (this.refName.current.id == 'ref-name') {
  window.addEventListener('scroll', this.handleScroll);
}

Update

As per your comment, to use ref in older version, you may use just like this:

<div ref={(el) => this.refName = el} id="ref-name">Hello!</div>
{/* notice double quote is not used */}

To access:

this.refs.refName

Example:

if (this.refs.refName.id == 'ref-name') {
  window.addEventListener('scroll', this.handleScroll);
}

To do it in more better way, you may use callback pattern.

edited Aug 29 '18 at 19:39

answered Aug 29 '18 at 19:24

Bhojendra Rauniyar

83,432
35
168
231

Oh, how I wish that were the case. Sadly, we are using 16.2 and I don't think that's an [option](https://stackoverflow.com/questions/43873511/deprecation-warning-using-this-refs) – crowhill Aug 29 '18 at 19:29
updated... let me know if you have further question. – Bhojendra Rauniyar Aug 29 '18 at 19:33
I get "createRef() is not a function." I don't think `React.createRef()` exists in React 16.2.0. – crowhill Aug 29 '18 at 19:38
You don't need that with older version. – Bhojendra Rauniyar Aug 29 '18 at 19:38
You may follow the callback ref linked in the post for its goodness. – Bhojendra Rauniyar Aug 29 '18 at 19:45

score 0 · Answer 4 · answered Aug 29 '18 at 20:43

[short-id][1] might be a good candidate!

It has methods like:

ids.store('foo');  // "8dbd46"
ids.fetch('8dbd46');  // 'foo'
ids.fetch('8dbd46');  // undefined
ids.configure(Object conf)



$ npm install short-id

RefsCmp.js

var shortid = require('shortid');

const RefsList = (newrefs) = > (
   {newrefs.map(item => (
      <div ref={shortid.generate()}>Hello!</div>
   ))}
)

export default RefsList;

Dynamically creating refs without strings

4 Answers4