I am new to Reactjs and just now I have started with React two way binding forms.I have coded for a form, I wanted the form clear after
submission.
Even after submission it's not getting clear.
Please point out mistake in the code.
Also check if I have implemented 2 way binding correctly.
Correct me if I am wrong.
ExpenseForm.js
import React, { useState } from "react";
const ExpenseForm = () => {
const [userInput, setuserInput] = useState({enteredTitle : '' , enteredAmount : '',enteredDate : ''});
const TitleChangeHandler = (event) => {
setuserInput((prevState) => {
return { ...prevState, enteredTitle: event.target.value };
});
};
const AmountChangeHandler = (event) => {
setuserInput((prevState) => {
return { ...prevState, enteredAmount: event.target.value };
});
};
const DateChangeHandler = (event) => {
setuserInput((prevState) => {
return { ...prevState, enteredDate: event.target.value };
});
};
const submitHandler = (event) => {
event.preventDefault();
const expenseData = {
title: userInput.enteredTitle,
amount: userInput.enteredAmount,
date: new Date(userInput.enteredDate),
};
console.log(expenseData);
setuserInput({enteredTitle : '' , enteredAmount : '',enteredDate : ''})
console.log(expenseData);
};
return (
<form onSubmit={submitHandler}>
<div className="new-expense__controls">
<div className="new-expense__control">
<label>Title</label>
<input
type="text"
value={setuserInput.enteredTitle}
onChange={TitleChangeHandler}
/>
</div>
<div className="new-expense__control">
<label>Amount</label>
<input
type="number"
value={setuserInput.enteredAmount}
onChange={AmountChangeHandler}
min="0.01"
stepmin="0.01"
/>
</div>
<div className="new-expense__control">
<label>Date</label>
<input
type="date"
value={setuserInput.enteredDate}
onChange={DateChangeHandler}
min="2019-01-01"
max="2022-12-31"
/>
</div>
<div className="new-expense__actions">
<button type="submit">Submit</button>
</div>
</div>
</form>
);
};
export default ExpenseForm;
I don't know what two-way binding is and I'm not quite sure why your inputs aren't resetting, usually when you reset the input's value it changes. But you can call event.target.reset() at the end of your submit handler to reset the form. Also, you can refactor your code to have only one onChangeHandler by assigning each input with a name attribute and then using that name within the onChangeHandler to dictate the key in the 'userInput' object:
const ExpenseForm = () => {
const [userInput, setuserInput] = useState({
enteredTitle: "",
enteredAmount: "",
enteredDate: ""
});
const onChangeHandler = (event) => {
setuserInput((prevState) => {
return { ...prevState, [event.target.name]: event.target.value };
});
};
const submitHandler = (event) => {
event.preventDefault();
const expenseData = {
title: userInput.enteredTitle,
amount: userInput.enteredAmount,
date: new Date(userInput.enteredDate)
};
console.log(expenseData);
setuserInput({ enteredTitle: "", enteredAmount: "", enteredDate: "" });
console.log(expenseData);
event.target.reset();
};
return (
<form onSubmit={submitHandler}>
<div className="new-expense__controls">
<div className="new-expense__control">
<label>Title</label>
<input
name="enteredTitle"
type="text"
value={setuserInput.enteredTitle}
onChange={onChangeHandler}
/>
</div>
<div className="new-expense__control">
<label>Amount</label>
<input
name="enteredAmount"
type="number"
value={setuserInput.enteredAmount}
onChange={onChangeHandler}
min="0.01"
stepmin="0.01"
/>
</div>
<div className="new-expense__control">
<label>Date</label>
<input
name="enteredDate"
type="date"
value={setuserInput.enteredDate}
onChange={onChangeHandler}
min="2019-01-01"
max="2022-12-31"
/>
</div>
<div className="new-expense__actions">
<button type="submit">Submit</button>
</div>
</div>
</form>
);
};
export default ExpenseForm;