React form with useState for multiple values - reactjs

Question

I have a demo here
It's a simple react form with typescript
Is it possible to use useState to capture the input fields data when the fields are completed
The form isn't just one piece of data but 3 - username, password and email
I could do it for one value with
onChange={e => setContact(e.target.value)}
but can I do it for 3 separate values

Answer 1

You can do it using computed properties.
First add a name property to each of your input, with values "username", "password", "email", then:
onChange={e => setContact(contact => ({...contact, [e.target.name]: e.target.value}))}
Edit: in React versions before 17, events are pooled and setContact update function is running asynchronously, so the event needs to be persisted this way:
onChange={e => {
e.persist();
setContact(contact => ({...contact, [e.target.name]: e.target.value}));
}}

Answer 2

Your handler could refer to the input name which you could then use to update the form object. There's a couple of issues with your syntax for this on the stackblitz - i.e the state object should be an object, not an array, so here's a full example:
const App = () => {
interface IForm {
username: string;
password: string;
email: string;
}
const [form, setFormValue] = useState<IForm>({
username: "",
password: "",
email: ""
});
const updateForm = (
formKey: keyof IForm,
event: React.ChangeEvent<HTMLInputElement>
) => {
const { value } = event.target;
setFormValue({
...form,
[formKey]: value
});
};
const handelSubmit = () => {
console.log("Form Submitted! Values: ", form);
};
return (
<div>
<form onSubmit={handelSubmit}>
<div>
<input
type="text"
placeholder="username"
value={form.username}
onChange={e => updateForm("username", e)}
/>
</div>
<div>
<input
type="password"
placeholder="password"
value={form.password}
onChange={e => updateForm("password", e)}
/>
</div>
<div>
<input
type="email"
placeholder="email"
value={form.email}
onChange={e => updateForm("email", e)}
/>
</div>
<input className="submit" type="submit" value="submit" />
</form>
</div>
);
};

Answer 3

You can create a object in the state and update the state with cloned object.
Here you go, Code with results as you expect:
import React, { useState } from "react";
import { render } from "react-dom";
import './style.css'
const App = () => {
interface IFrom {
username: string;
password: string;
email: string;
}
const [contact, setContact] = useState<IFrom[]>({
username:"",
email:"",
password:"",
});
console.log(contact)
const handelSubmit = () =>
{
axios.post(contact) //Example
};
return (
<div>
<form onSubmit={handelSubmit}>
<div>
<input
type="text"
placeholder="username"
value={contact.usename}
onChange={e => setContact({...contact, username: e.target.value})}
/>
</div>
<div>
<input
type="password"
placeholder="password"
onChange={e => setContact({...contact, password: e.target.value})}
/>
</div>
<div>
<input
type="email"
placeholder="email"
onChange={e => setContact({...contact, email: e.target.value})}
/>
</div>
<input className='submit' type="submi" value='submit'/>
</form>
</div>
);
};
render(<App />, document.getElementById("root"));