How can you create Refs after the component has mounted in React? - reactjs

Question

My case requires that I use React.createRef() for each time picker I have (there is a certain functionality in the time pickers that can be only used through Refs).
When the page is mounted, I have initially 2 time pickers. All works well when I have only two, but my work is ruined because I am required to Add/Remove Time Pickers using buttons. So I am able to add the time pickers easily.
But now my question is how do I create the refs ? My declaration for React.createRef() is in the Constructor(){} for the first 2 refs.
The question is where do I instantiate the refs for the time pickers that are added onClick ?
Thank you

Answer 1

You should wrap your time picker in an another component, create the ref there and perform the work that requires a ref inside of that components then forwarding the result via props (you can pass a function via a prop).
For example, you could give each component an unique ID (uuid does a great job of that), pass that via a prop, pass a value and pass a function that accepts an ID and a value, then call that function whenever a result from the ref is obtained.

Answer 2

You could do something like this, but it requires you to have a unique identifier per component that should not be the index. (Cause this can change)
Pseudo Code
class Wrapper extends Component {
construct() {
...
this.refsById = {}
}
getRefOrCreate(id) {
if(_has(this.refsById[id]) {
return this.refsById[id];
} else {
this.refsById[id] = React.createRef();
return this.refsById[id];
}
}
onClickHandler(value, id) {
const ref = this.refs[id];
const { onClick } = this.props;
}
render(){
// Here you need to know how many pickers you need, and their id
const { pickersInformationArray} = this.props;
return (
<div> { pickersInformationArray.map((id) => <TimePicker ref={this.getRefOrCreate(id);} onClick={(value) => { this.onClickHandler(value, id); } } )} </div>
)
}

Answer 3

I found the solution.
Let me first say that I was using the method of creating ref in the constructor in my incorrect solution
class DummyClass extends Component {
constructor(){
this.timePickerRef = React.createRef();
}
}
render() {
let timers = array.map( index => {
<TimePicker
ref={timepicker => timePickerRef = timepicker}
value={00}
onChange={(data) =>
{this.handleTimePcikerValueChange(data, index);}}
/>
}
return (
timers
)
}
}
what I instead did was the following
disregard and remove this.timePickerRef = React.createRef() since it will no longer be necessary
while the code in handleTimePcikerValueChange & render will be as follows:
handleTimePcikerValueChange = (value, index) => {
// do whatever manipulation you need
// and access the ref using the following
this[`timePicker_${index}`]
}
render() {
let timers = array.map( index => {
<TimePicker
ref={timepicker => this[`timePicker_${index}`] = timepicker}
value={00}
onChange={(data) =>
{this.handleTimePcikerValueChange(data, index);}}
/>
}
return (
timers
)
}
I didn't post the code that handle adding time pickers because it is irrelevant.
I would like to thank those who responded !