I tried to make an array of ref using the callback function.

class A extends React.Component {

const arr=[1,2,3,4,5];
    constructor(props) {
        super(props);
        this.inputs = [];
    }

componentDidMount()
{
console.log(this.inputs, this.inputs.length, this.inputs[0]) // here length of inputs is 0 and inputs[0] is undefined
}

    render() {
        return(
<div>
arr.map((key, index) => (
            <Input 
                key={key} 
                ref={input => this.inputs[index] = input}
            />
<button type="button" onClick={this.inputs[index].current.focus()}>Focus</button>
//here is got error as inputs[0] is undefined
)
)
</div>
;
    }
}

I am facing two problem

• I created the ref inside the array, the array has multiple refs but does not know how the array is formatted as the length of the array is 0
• As the length of the array is 0, I can't call the ref using the array index.