verification-inputs/index.js

Verification Inputs

import { useState } from "react";
import VerificationInput from "./VerficatinInput";

const VerificationInputs = ({ getValue, setValue, inputNumber = 6 }) => {
  const [focusedIndex, setFocusedIndex] = useState(0);

  const handleOnInputChange = (e) => {
    const isItANumber = /Digit[0-9]/.test(e.code);
    const isBackspace = /Backspace/.test(e.code);

    if (!isItANumber && !isBackspace) {
      return false;
    }

    if (!isBackspace && getValue.length < inputNumber) {
      setValue((prev) => [...prev, e.key]);
      if (focusedIndex < inputNumber - 1) setFocusedIndex((prev) => prev + 1);
    }

    //Remove the last element
    if (isBackspace) {
      setValue((prev) => {
        prev.pop();
        return [...prev];
      });

      if (focusedIndex > 0) setFocusedIndex((prev) => prev - 1);
    }
  };

  return (
    <div style={{ display: "flex", justifyContent: "center" }}>
      {[...new Array(inputNumber)].map((e, i) => {
        return (
          <VerificationInput
            onKeyDown={handleOnInputChange}
            value={getValue[i]}
            focusedIndex={focusedIndex}
            inputIndex={i}
          />
        );
      })}
    </div>
  );
};

export default VerificationInputs;