The basic principle of JavaScript:

1). If the two fields are individual then should maintain individual states

2). If the two fields belong to someone then we should use objects.

3). If we want to represent a collection then should go for array.

State -> html -- one-way data binding

Html -> state -- two-way data binding.

Case_1: Maintain multiple state for multiple form fields.

let [ username , setUsername ] = useState('');
let [ password , setpassword ] = useState('');

Case_2: Maintain single state for multiple form fields

let [userDatata, setUserData ] = useState( {username:"", password: ""});

Case_3: Maintain individual event-handling functions.

function  usernameHandler(event){
	SetState(prevState=> {
		return {
			event.target.value;
		}
	})
}

function passwordHandler(event){
	SetState(prevState=> {
		return {
			event.target.value;	
		}
  } )
)

Case_4: Maintain a single event-handling function by passing the key name

function  handler(event,key){
	SetState(prevState=> {
		return {
			...prevState,
			[Key]: event.target.value;
		} 
	} )
}

Onchange={ (event)=>{ handler(event, "username")}}

Onchange={ (event)=>{ handler(event, "password")}}