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
– Bhojendra Rauniyar

2018-08-29 19:43:55 +00:00
Commented Aug 29, 2018 at 19:43 — Bhojendra Rauniyar
– Bhojendra Rauniyar, Commented Aug 29, 2018 at 19:43

nbwoodward · Accepted Answer · 2018-08-29 19:20:26Z

1

Try just:

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

answered Aug 29, 2018 at 19:20

nbwoodward

3,1961 gold badge22 silver badges29 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

crowhill Over a year ago

"using string literals in ref attributes is depreciated." see here

ageoff · Accepted Answer · 2018-08-29 19:38:27Z

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, 2018 at 19:38

ageoff

2,8282 gold badges28 silver badges42 bronze badges

1 Comment

crowhill Over a year ago

This was my initial thought and it does work. Thank you.

Bhojendra Rauniyar · Accepted Answer · 2018-08-29 19:39:51Z

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, 2018 at 19:39

answered Aug 29, 2018 at 19:24

Bhojendra Rauniyar

86k36 gold badges179 silver badges241 bronze badges

5 Comments

crowhill Over a year ago

Oh, how I wish that were the case. Sadly, we are using 16.2 and I don't think that's an option

Bhojendra Rauniyar Over a year ago

updated... let me know if you have further question.

crowhill Over a year ago

I get "createRef() is not a function." I don't think React.createRef() exists in React 16.2.0.

Bhojendra Rauniyar Over a year ago

You don't need that with older version.

Bhojendra Rauniyar Over a year ago

You may follow the callback ref linked in the post for its goodness.

Thaman Chand · Accepted Answer · 2018-08-29 20:43:31Z

0

[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;

answered Aug 29, 2018 at 20:43

Thaman Chand

363 bronze badges

Collectives™ on Stack Overflow

Dynamically creating refs without strings

4 Answers 4

1 Comment

1 Comment

5 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

1 Comment

1 Comment

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related