title: Adding characters automatically in react-hooks textInput
body: <p>I am using react-native with react-hooks. I want to add some characters automatically like '-' or '(space)' in card number and '/' in due date. It should work like below.</p>
  
  <p>If user enter numbers in card number input than '-' should add automatically.<br/>
  <code>1234</code> -> <code>1234-</code> -> <code>1234-5678</code> -> <code>1234-5678-</code>. <br/>
  Also at due date, I want to add '/'.<br/>
  <code>02</code> -> <code>02/</code> -> <code>02/23</code></p>
  
  <pre class="lang-js prettyprint-override"><code>const CardAdd = () =&gt; {
    const [cardNumber, setCardNumber] = useState("");
    const [dueDate, setDueDate] = useState("");
  
    onInputChange = (setState, value) =&gt; {
      setState(value);
    };
  
    if (dueDate.length === 2) {
      setDueDate(dueDate + "/");
    }
  
    return (
      &lt;View style={styles.container}&gt;
        &lt;Input
          name="Card Number"
          keyboardType="number-pad"
          style={styles.inputContainer}
          placeholder="1234 5678 1234 5678"
          value={cardNumber}
          onChangeText={value =&gt; onInputChange(setCardNumber, value)}
        /&gt;
        &lt;Input
          name="Due Date"
          keyboardType="number-pad"
          style={styles.inputContainer}
          placeholder="MM/YY"
          value={dueDate}
          onChangeText={value =&gt; onInputChange(setDueDate, value)}
        /&gt;
      &lt;/View&gt;
    );
  };
  </code></pre>
  
  <p>If I do it like this, it does work. It adds '/' automatically when I type in 2 digits at due date. But I can't delete the after than. How can I solve this problem?</p>