Having trouble with a React component that involves splitting a 9-digit code across three input fields. The issue arises when I enter more than 3 digits in one field, as it doesn't shift to the next field as expected. Also, pasting a 9-digit code into the first field leaves the others blank. Any help would be greatly appreciated!
Exploring solutions for my React component.
export default function VoucherPage() {
const router = useRouter();
const [secret, setSecret] = useState<string>("");
const [inputs, setInputs] = useState<SecretCode>({
input1: "",
input2: "",
input3: "",
});
const handleInputChange = (e: React.ChangeEvent<HTMLInputElement>) => {
setInputs((prevState) => ({
...prevState,
[e.target.name]: e.target.value,
}));
};
return (
<div className="top_page_container">
<div className={styles.voucher_container}>
<input
maxLength={3}
className={styles.voucher_input}
name="input1"
onChange={handleInputChange}
value={inputs.input1}
></input>
<input
maxLength={3}
className={styles.voucher_input}
name="input2"
onChange={handleInputChange}
value={inputs.input2}
></input>
<input
maxLength={3}
className={styles.voucher_input}
name="input3"
onChange={handleInputChange}
value={inputs.input3}
></input>
</div>
<Button
style={{
width: "16em",
}}
onClick={handleSubmit}
>
Submit
</Button>
</div>
);
}
Customizing my CSS
.voucher_input {
width: 6ch;
font-size: 1.3rem;
padding: 0 1rem;
border-radius: 0.24em;
padding: 0.2em;
text-align: center;
}
.modal_container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 1em;
}