title: How can I make this code work for expiry date TextInput which includes (mm/yy) model?
body: <p>I want to create a checkout form which includes expiry date <code>TextInput</code>. It will look like a this (MM/YY). After adding first 2 digits it will automatically add / then the person can type last 2 digits for the year. I found this code on the other question. But it doesn't work. When you type inside the form nothing is typed. Here is the code. How can I make this code work as needed?</p>
  
  <pre><code>constructor() {
    super()
    this.state = {
      isReady: false
    }
  }
  
  componentDidMount() {
    this.setState({
      isReady: true
    })
  }
  onChange(text) {
      let newText = '';
      let numbers = '0123456789';
  
      for (var i = 0; i &lt; text.length; i++) {
          if ( numbers.indexOf(text[i]) &gt; -1 ) {
              newText = newText + text[i];
          }
      }
      this.setState({myNumber: newText})
  }
  formatFunction(cardExpiry = ""){
     //expiryDate will be in the format MMYY, so don't make it smart just format according to these requirements, if the input has less than 2 character return it otherwise append `/` character between 2nd and 3rd letter of the input.
     if(cardExpiry.length &lt; 2){
      return cardExpiry;
     }
     else{
      return cardExpiry.substr(0, 2) + "/" + (cardExpiry.substr(2) || "")
     }
  }
  
  inputToValue(inputText){
      //if the input has more than 5 characters don't set the state
      if(inputText.length &lt; 6){
           const tokens = inputText.split("/");
           // don't set the state if there is more than one "/" character in the given input
           if(tokens.length &lt; 3){
              const month = Number(tokens[1]);
              const year = Number(tokens[2]);
              //don't set the state if the first two letter is not a valid month
              if(month &gt;= 1 &amp;&amp; month &lt;= 12){
                 let cardExpiry = month + "";
                 //I used lodash for padding the month and year with  zero
                 if(month &gt; 1 || tokens.length === 2){
                      // user entered 2 for the month so pad it automatically or entered "1/" convert it to 01 automatically
                      cardExpiry = _.padStart(month, 2, "0");
                 }
                 //disregard changes for invalid years
                 if(year &gt; 1 &amp;&amp; year &lt;= 99){
                     cardExpiry += year;
                 }
                 this.setState({cardExpiry});
              }
           }
      }
  }
  
  render (){
     let {cardExpiry} = this.state;
    return (
      &lt;Image style={styles.image} source={require('../img/cover.jpg')}
    &gt;
  
  
           &lt;Content style={styles.content}&gt;
  
              &lt;Form&gt;
                &lt;Item &gt;
                  &lt;Icon active name='card'/&gt;
                  &lt;Input keyboardType='numeric' maxLength={16} placeholder='Card Number'
                  onChangeText = {(text)=&gt; this.onChange(text)}
        value = {this.state.myNumber}/&gt;
        &lt;/Item&gt;
  
        &lt;Grid&gt;
        &lt;Row&gt;
        &lt;Col&gt;
  
                &lt;Item style={{ marginBottom:10}}&gt;
                  &lt;Icon active name='calendar' /&gt;
                  &lt;Input keyboardType='numeric' placeholder='MM/YY' 
                  value = {this.formatFunction(cardExpiry)}
         onChangeText={this.inputToValue.bind(this)}/&gt;
                &lt;/Item&gt;
                &lt;/Col&gt;
                &lt;Col&gt;
  
                        &lt;Item style={{ marginBottom:10}}&gt;
                          &lt;Icon active name='lock' /&gt;
                          &lt;Input maxLength={3} secureTextEntry={true}  placeholder='CVV'/&gt;
                        &lt;/Item&gt;
                        &lt;/Col&gt;
                &lt;/Row&gt;
                &lt;/Grid&gt;
  </code></pre>