I need assistance with setting up a form with 4 text fields for entering a 4-digit code sent to a phone. How can I automatically switch to the next field when a number is entered and ensure that only numbers are accepted? I will include a screenshot along with my code base. https://i.sstatic.net/tFvRu.png
// flow
import React, { useRef } from 'react';
import { signup } from '../../assets/images';
import FormDiv from '../shared/Sign-in-div';
import ImageDiv from '../shared/Image-div';
import { Nunito32, Nunito20 } from '../shared/nunito/nunito';
import ImageContainer from '../shared/image-container';
import OtpField from '../shared/otp-field';
import PinkButton from '../shared/button-color-pink';
let [fieldOne, fieldTwo, fieldThree, fieldFour] = useRef(null);
const onChange = (field) => {
field.current.focus();
};
const SignUpVerification = () => (
<div style={{ display: 'flex' }}>
<FormDiv style={{ textAlign: 'center' }}>
<Nunito32
style={{
display: 'inline-block',
textAlign: 'center',
marginRight: 236,
marginLeft: 200,
}}
>
Verify your mobile number by entering the code we sent you
</Nunito32>
<div style={{ flexDirection: 'row' }}>
<OtpField
ref={(input) => {
fieldOne = input;
}}
style={{ marginRight: 10.5 }}
onChange={() => onChange(fieldTwo)}
/>
<OtpField
ref={(input) => {
fieldTwo = input;
}}
onChange={() => onChange(fieldThree)}
style={{ marginRight: 10.5 }}
/>
<OtpField
ref={(input) => {
fieldThree = input;
}}
onChange={() => onChange(fieldFour)}
style={{ marginRight: 10.5 }}
/>
<OtpField
ref={(input) => {
fieldFour = input;
}}
style={{ marginRight: 10.5 }}
/>
</div>
<PinkButton style={{ marginTop: 75 }}>Continue</PinkButton>
<Nunito20>Send again</Nunito20>
</FormDiv>
<ImageContainer>
<ImageDiv bg={signup} src={signup} alt="logo" />
</ImageContainer>
</div>
);
export default SignUpVerification;
I am encountering two errors stating that fieldOne is created but not used and an "Invalid hook call" error. Hooks should only be called within function components. This issue may occur due to the following reasons: