0

I have this code:

constructor(props: any) {
    super(props);
    this.state = {
      pin: "",
    };

    this.inputRefs = [
      createRef(),
      createRef(),
      createRef(),
      createRef()
    ];
  }

My render:

<View style={{ flexDirection: "row" }}>
  {
    this.inputRefs.map((k, idx) => (
      <TextInput
        onChange={() => this.goToNextInput(idx)}
        ref={r => this.inputRefs[idx] =  r}
        maxLength={1}
        style={styles.pInput}
      />
    ))
  }
</View>
goToNextInput = (idx) => {
  if (idx < 3) {
    this.inputRefs[idx + 1].focus();
  } else {
    // If all 4 TextInput have been filled in,
    // I want to get the values, combine them and store them in state like this:
    // this.setState({
    //  pin: <value>
    // });
  }
}

Basically this is a component where users will enter a 4-digit code which will be sent to the next component as props. Thanks to anyone who can help.

0 Answers0