2

Could anyone tell me how to create refs in react dynamically?

For example, I have 

<canvas style={{display:'none'}} ref={(el) => this.image = el} > </canvas>

I want to create more dynamically.

Like this:

<canvas style={{display:'none'}} ref={(el) => this.image1 = el} > </canvas>
<canvas style={{display:'none'}} ref={(el) => this.image2 = el} > </canvas>
<canvas style={{display:'none'}} ref={(el) => this.image3 = el} > </canvas>

So, can I do this, or is there another way to do it?

Basically I am getting the pdf url's from server which I am converting to canvas and then to image using it.

I have already done that for one image, but to do this dynamically I will have to create those refs dynamically too and thus be able to reference them.

So, how do I do that?

EDIT : Actually I have to create img tags too dynamically and create refs for those too as I want to create dataurl from canvas and display it in image tags.

Elydasian
  • 2,016
  • 5
  • 23
  • 41
faraz
  • 2,603
  • 12
  • 39
  • 61

2 Answers2

2

Its easy to define refs dynamically using callback pattern, just specify a class variable to an empty object in constructor and then set the refs while mapping over it like

constructor(props) {
   super(props);
   this.canvasRefs = {}
}

this.props.canvases.map((value,index)=> {
     let id = index;
     return <canvas ref={(ref) => this.canvasRefs[`canvas${id}`] = ref}></canvas>
})

and you can access them as this.canvasRefs.canvas1,this.canvasRefs.canvas2 and so on

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
  • how does this.canvasRefs = {} in constructor help?? – faraz May 30 '18 at 07:30
  • We are saving the refs as key value pairs in object, so instead of writing `this.cavas1, this.canvas2`, you can think of it like `this.canvasRefs = { canvas1: refInstance, canvas2: refInstance }`, if you don't initialize an empty object, it would give you an error in `this.canvasRefs[\`canvas${index}\`]` – Shubham Khatri May 30 '18 at 07:36
  • i have been trying that. but when I try to access. I always get this.canvasRefs = {} there's nothing in it although I can see the canvas's and image tags created – faraz May 30 '18 at 08:54
  • how and when are you trying to access canvasRefs – Shubham Khatri May 30 '18 at 09:00
  • i am actually doing it when a modal opens. so, then the canvas elements are created and then I try to access them within a promise. but maybe trying to access it soon after creation , it may not have been able to get the new data yet. maybe that's why it's not finding it. but if you have any ideas. please suggest. – faraz May 30 '18 at 09:04
  • yeah. adding that = ref at the end did help. now i am able to see values inside this.canvasRefs. the problem is that I am just seeing the last one there. so, I am just getting this.canvasRefs = {canvas5:canvas} where are all the other refs then?? – faraz May 30 '18 at 09:15
  • oh no. it wasnt a closure issue. it was my mistake actually. got it working now. thanks. – faraz May 30 '18 at 09:19
1

You can use map if you have an array of canvas.

this.props.canvases.map((value,index)=>
<canvas ref={'canvas'+index}></canvas>
)

you can access it like:

this.refs[canvas0];
Roopak Puthenveettil
  • 1,387
  • 2
  • 13
  • 27