How to get dynamic ref on React

Question

I have an element with this ref

ref={`inner-player${this.props.position}`}

and in a function I need to work with that ref doing something like this

const chipBetImage = this.refs.inner-player${this.props.position};

but I am getting an error

./app/components/ui/PlayerSlot/index.js
Module build failed: SyntaxError: /home/marcelo/Documents/Projects/application-playerinterface/app/components/ui/PlayerSlot/index.js: Unexpected token (150:50)
  148 |       this.props.addMoney({position : this.props.position, currentBet : this.props.currentBet});
  149 |     } else {
> 150 |       const chipBetImage = this.refs.inner-player${this.props.position};
      |                                                   ^
  151 |       chipBetImage.classList.add('animated', 'pulse');

so, which is the way to do this ?

Community · Accepted Answer · 2017-05-23 11:44:34Z

2

${} is only valid inside template literals. this.refs.inner-player${this.props.position}; is not a template literal.

If you want to use a computed property name, you have to use bracket notation:

this.refs[`inner-player${this.props.position}`]

See Dynamically access object property using variable .

edited May 23, 2017 at 11:44

CommunityBot

11 silver badge

answered Nov 17, 2015 at 19:05

Felix Kling

820k181 gold badges1.1k silver badges1.2k bronze badges

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

Collectives™ on Stack Overflow

How to get dynamic ref on React

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related