Q: TypeError: Cannot read property 'current' of undefined focus I have 4 inputs and I want when user filled the first input, focused on the second input. 
  constructor(props) {
    ...
    this.textInput1 = React.createRef();
    this.textInput2 = React.createRef();
    this.textInput3 = React.createRef();
    this.textInput4 = React.createRef();

    this.onChangeInputText = this.onChangeInputText.bind(this)


  onChangeInputText(e){
    const index = e.currentTarget.dataset.index;
    console.log('index',index)
    if(index == 1)
      this.setState({'cardNumber1':e.target.value})
    if(index == 2)
      this.setState({'cardNumber2':e.target.value})
    if(index == 3)
      this.setState({'cardNumber3':e.target.value})
    if(index == 4)
      this.setState({'cardNumber4':e.target.value})

      if (e.target.value.length == 4) {
        this[`textInput${index + 1}`].current.focus()
      }
  }

my view:
  <input onChange={this.onChangeInputText} data-index={4} ref={this.textInput4} value={cardNumber4}  name="card4" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" pattern="[0-9]*" tabindex="4" maxLength="4" />
  <input onChange={this.onChangeInputText} data-index={3} ref={this.textInput3} value={cardNumber3}  name="card3" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" pattern="[0-9]*" tabindex="3" maxLength="4" />
  <input onChange={this.onChangeInputText} data-index={2} ref={this.textInput2}  value={cardNumber2}  name="card2" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" pattern="[0-9]*" tabindex="2" maxLength="4" />
 <input onChange={this.onChangeInputText} data-index={1} ref={this.textInput1} value={cardNumber1} name="card1" type="text" class="form-control col-xs-3 col-sm-3" style={{paddingLeft:'0px !important;'}} required="" autocomplete="off" pattern="[0-9]*" tabindex="1" maxLength="4" />

but I got this message error:
Uncaught TypeError: Cannot read property 'current' of undefined

I can solve the problem with if statement:
  if (e.target.value.length == 4) {
   // this[`textInput${index + 1}`].current.focus()
   if(index == 1)
    this.textInput2.current.focus();
   if(index == 2)
    this.textInput3.current.focus();
   if(index == 3)
    this.textInput4.current.focus();

  }


A: if (e.target.value.length == 4) {
    this[`textInput${index + 1}`].current.focus()
 }

so here this[`textInput${index + 1}`] this results in undefined in case your index is 4 and value.length is also 4 
so you end getting this[textInpu5]  which is undefined
Or if you don't parse your index into number you will have conditions like this[textInput21] or which will also be undefined

A: If you increment the index, then for the fourth item, it will be trying to access this.textInput5, which doesn't exist - remove the + 1:
this[`textInput${index}`].current.focus();


A: index happens to be a string. You're using it as string in your if comparisons. That works because "1" == 1 is true. But when you're trying to do math, it's actually resulting in string concatenation. "1" + 1 is 11.
So, the line where the error occurs evaluates to this.textInput11 which is undefined.
You can convert index to a number in the beginning itself, to prevent confusions. Like const index = parseInt(e.currentTarget.dataset.index);
