How to create custom input field with autospaces for entering vehicle number plate-CodePudding

I need to devlop input field for vehicle number entry but the only problem I am facing when press backspace the logic breaks need help in this..

React.useEffect(()=>{
if(cardNumber.length===2)
    setCardNumber(cardNumber " ")
else if (cardNumber.length === 5) {
    setCardNumber(cardNumber " ")
} else if (cardNumber.length === 8) {
    setCardNumber(cardNumber " ")
}
}, [cardNumber]);

CodePudding user response：

Move your logic from useEffect hook to onChange and try following:

const onChange = (event) => {
    const value = event.target.value;

    if ([2, 5, 8].includes(value.length)) {
      setCardNumber((prev) => {
        // this is only the case when we try to delete empty space
        if (prev.endsWith(" ")) {
          return value.slice(0, -1);
        } else {
          return value   " ";
        }
      });
    } else {
      setCardNumber(value);
    }
  };

There are many possible solutions, so this is just a one of them. Basically the idea is to read previous state and check if the value ends with an empty space.

https://codesandbox.io/s/compassionate-grass-krhwxh