React How to set an element's ref value using a variable

Question

So I have something very simple:

<TextField ref={id}/>

I am wondering how I would use a variable as a ref, instead of a string? I kind of need this because this element is being generated in the render method, just before the return method. So I am using refs that are just created in a for loop.

Answer 1

<TextField ref={(ref) => this.myRefName = ref} />

Then you can access it via this.myRefName ie console.log(this.myRefName)

Answer 2

You can make use of ref callback to access ref via a variable rather than a string

<TextField ref={(input) => this.myField = input}/>

Now you can refer to TextField like this.myField

Ref callback doc