How to change from one text field to another - css

Question

I have a 4 text fields which are meant to be used to type in a 4 digit code sent to the phone. How can I automatically change to the next field if a number is written and for it not to take anything apart from numbers
Ill attach a picture along with my code base
// 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.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;
It now gives me 2 errors that fieldOne is created but not used and ×
Error: Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for one of the following reasons:

Answer 1

How about re-render when the state you change?

Answer 2

Handling focus is good task for Refs in React. So idea will be to have refs for input fields and in onChange event handler check if user typed 3 digits and turn focus to next input.
I have created demo on codesandbox to showcase how it works

Answer 3

Since you are making use of React JS, you can go forward with React Refs and the DOM where you can select the nodes and handle the focus pragmatically. This is a sample implementation. Find the implementation here.
class App extends React.Component{
componentDidMount(){
this.fieldOne.focus();
}
onChange(field) {
field.focus();
}
render() {
return(
<div>
<input
onChange={() => this.onChange(this.fieldTwo)}
ref={(input) => { this.fieldOne = input; }}
placeholder="First Field"
/>
<input
onChange={() => this.onChange(this.fieldThree)}
ref={(input) => { this.fieldTwo = input; }}
placeholder="Second Field"
/>
<input
onChange={() => this.onChange(this.fieldFour)}
ref={(input) => { this.fieldThree = input; }}
placeholder="Third Field"
/>
<input
ref={(input) => { this.fieldFour = input; }}
placeholder="Fourth Field"
/>
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.6.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/15.6.1/react-dom.min.js"></script>
<div class="container-fluid" id="main">
<div class="row">
<div class="col-xs-12">
<div id="root"></div>
</div>
</div>
</div>