Adding characters automatically in react-hooks textInput

Question

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.

If user enter numbers in card number input than '-' should add automatically.
1234 -> 1234- -> 1234-5678 -> 1234-5678-.
Also at due date, I want to add '/'.
02 -> 02/ -> 02/23

const CardAdd = () => {
  const [cardNumber, setCardNumber] = useState("");
  const [dueDate, setDueDate] = useState("");

  onInputChange = (setState, value) => {
    setState(value);
  };

  if (dueDate.length === 2) {
    setDueDate(dueDate + "/");
  }

  return (
    <View style={styles.container}>
      <Input
        name="Card Number"
        keyboardType="number-pad"
        style={styles.inputContainer}
        placeholder="1234 5678 1234 5678"
        value={cardNumber}
        onChangeText={value => onInputChange(setCardNumber, value)}
      />
      <Input
        name="Due Date"
        keyboardType="number-pad"
        style={styles.inputContainer}
        placeholder="MM/YY"
        value={dueDate}
        onChangeText={value => onInputChange(setDueDate, value)}
      />
    </View>
  );
};

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?

formatted-input module is here. you can use this to implement the cardNumber input and dueDate input — Jorge
– Jorge, Commented Oct 3, 2019 at 13:53

onuriltan · Accepted Answer · 2019-10-03 14:01:20Z

You should use useEffect hook to keep track of the changes of the state and update your state accordingly, I have made some logic about credit card but it may not work, but you can improve the logic

import React, { useEffect, useState } from 'react'

const CardAdd = () => {
  const [cardNumber, setCardNumber] = useState("");
  const [dueDate, setDueDate] = useState("");

  onInputChange = (setState, value) => {
     if(!isNaN(value)) {
       setState(value);
     }
  };

  useEffect(() => {
    if (dueDate.length === 2) {
      setDueDate(dueDate + "/");
    }
    if(cardNumber.length === 4) {
      setCardNumber(cardNumber+'-')
    }
    if(cardNumber.contains('-') 
   && (cardNumber.length - cardNumber.split("-").length - 1) % 2 === 0 
   && (cardNumber.length - cardNumber.split("-").length - 1) !== 16
) {
       setCardNumber(cardNumber+'-')
    }

  }, [cardNumber, dueDate]) 



  return (
    <View style={styles.container}>
      <Input
        name="Card Number"
        keyboardType="number-pad"
        style={styles.inputContainer}
        placeholder="1234 5678 1234 5678"
        value={cardNumber}
        onChangeText={value => onInputChange(setCardNumber, value)}
      />
      <Input
        name="Due Date"
        keyboardType="number-pad"
        style={styles.inputContainer}
        placeholder="MM/YY"
        value={dueDate}
        onChangeText={value => onInputChange(setDueDate, value)}
      />
    </View>
  );
};

Collectives™ on Stack Overflow

Adding characters automatically in react-hooks textInput

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related