Dynamic variable name using this in ReactJS

Question

I want to create multiple refs for 40 divs without using React.createRef(). But I'm unable to create dynamic variable name for my ref. I'm using below code to create ref.

const displayXmasTreeParts = () => Array(40).fill().map((el, index) => (
  <div className={`xmasTreePart${randomClass}`} key={`part${index}`} 
     ref={el => [this.el`${index}`] = el}/>
);

const handleClick = () => this.el5.classList.add(`new-class`);

render() {
  return (
    <div className="xmasTree">
      {this.displayXmasTreeParts()}
    </div>
    <button className="SetUpTree" onClick={this.handleClick}>Click here to reveal Our Xmas Tree</button>
)}

I also tried this ref={el => `this.el${index}` = el}

But getting this error Invalid left-hand side in assignment expression in both cases.

You need to use [ ] brackets for dynamic variable names instead of dot — Ozgur Sar
– Ozgur Sar, Commented Dec 3, 2020 at 8:28
Do u mean this[`${el + index}`] ? I tried this too but unable to get the value of this.el5 — Neel Dsouza
– Neel Dsouza, Commented Dec 3, 2020 at 8:39
Are you using a functional component? They don't really have an instance you can refer to, certainly not via this. How/when/where is displayXmasTreeParts called? Please provide a more complete example. — Felix Kling
– Felix Kling, Commented Dec 3, 2020 at 9:12
I'm using Class Component. displayXmasTreeParts() is called from render() function. — Neel Dsouza
– Neel Dsouza, Commented Dec 3, 2020 at 12:55

Kevin Moe Myint Myat · Accepted Answer · 2020-12-03 08:44:09Z

2

How about

ref={el => {this["el"+index] = el}}/>

answered Dec 3, 2020 at 8:44

Kevin Moe Myint Myat

2,1851 gold badge12 silver badges19 bronze badges

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

1 Comment

Neel Dsouza Over a year ago

This works perfectly fine to create dynamic variable. Thanks

Ali Faris · Accepted Answer · 2020-12-03 12:59:42Z

1

you need to store the refs in array

class Component {
    
    let _refs = [];
    
    displayXmasTreeParts = () => Array(40).fill().map((el, index) => {
    
        _refs = [];
    
        return (
           <div className={`xmasTreePart${randomClass}`} key={`part${index}`} 
                ref={el => _refs.push(el)}/>
           );
    }
    
    
    ...

    
}

answered Dec 3, 2020 at 12:59

Ali Faris

18.7k12 gold badges51 silver badges75 bronze badges

2 Comments

Neel Dsouza Over a year ago

But is there a way we can have dynamic variable name which has this keyword?

Ali Faris Over a year ago

I don't know about dynamic variables, but I think having an array is a better data structure for your case

Collectives™ on Stack Overflow

Dynamic variable name using this in ReactJS

2 Answers 2

1 Comment

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related