I’m looking forward for the easiy and understandable explanation of the difference between useState and formData method for handling form data in React.
Example code with useState:
const InitialForm = {
amount: 0,
descritpion: "",
};
export default function TransactionForm({ fetchTransaction, editTransaction }) {
const [form, setForm] = useState(InitialForm);
function handleInput(e) {
setForm({ ...form, [e.target.name]: e.target.value });
}
<form onSubmit={handleSubmit}>
<TextField
type="number"
name="amount"
value={form.amount}
onChange={handleInput}
/>
<TextField
name="descritpion"
value={form.descritpion}
onChange={handleInput}
/>
<Button type="submit">Submit</Button>
)}
</form>
}
Example code with Form Data:
export default function TransactionForm({ fetchTransaction, editTransaction }) {
function handleInput(e) {
const data = new FormData(event.currentTarget);
}
<form onSubmit={handleSubmit}>
<TextField
type="number"
name="amount"
value={form.amount}
onChange={handleInput}
/>
<TextField
name="descritpion"
value={form.descritpion}
onChange={handleInput}
/>
<Button type="submit">Submit</Button>
)}
</form>
}
Thank you in advance
I’m looking forn better solution for handling form data in React