I am new to React, I am trying out forms in React, After I submit the form data, the object I am storing data in has undefined values. I am using React states as well, For CSS classes I have used Bootstrap, please find the code below
import React, { useState } from "react";
const NewExpenseForm = () => {
const [enteredTitle,setEnteredTitle] = useState('');
const [enteredAmount,setEnteredAmount] = useState('');
const [enteredDate,setEnteredDate] = useState('');
const titleEventHandler = (event) => {
setEnteredTitle(event.target.input);
};
const amountEventHandler = (event) => {
setEnteredAmount(event.target.input);
};
const dateEventHandler = (event) => {
setEnteredDate(event.target.input);
};
const submitHandler = (event) =>{
event.preventDefault();
const data = {
title: enteredTitle,
amount: enteredAmount,
date: new Date(enteredDate)
};
console.log(data);
};
return (
<form onSubmit={submitHandler}>
<div className="row gx-0 mt-5">
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Title</label>
<input onChange={titleEventHandler} type="text" value={enteredTitle} className="form-control" id="title_id" required/>
</div>
</div>
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Amount</label>
<input onChange={amountEventHandler} type="number" className="form-control" id="amount_id"/>
</div>
</div>
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Date</label>
<input onChange={dateEventHandler} type="date" className="form-control" id="date_id"/>
</div>
</div>
</div>
<button type="submit" className="btn btn-primary m-5">Submit</button>
</form>
);
}
export default NewExpenseForm;
and in data in console, I am getting this
{title: undefined, amount: '', date: Invalid Date}
and I am calling this component in another component like so
import NewExpenseForm from "./NewExpenseForm";
function NewExpense(){
return(
<div>
<NewExpenseForm/>
</div>
);
}
export default NewExpense;
Where am I going wrong?
CodePudding user response:
use event.target.value
instance event.target.input
CodePudding user response:
I've made few changes in your code
import React, { useState } from "react";
const NewExpenseForm = () => {
const [user,setUser] = useState({
enteredTitle:"",
enteredAmount:"",
enteredDate:""
});
let name,value;
const titleEventHandler = (event) => {
name = event.target.name;
value = event.target.value;
setUser({...user,[name]:value});
};
const submitHandler = (event) =>{
event.preventDefault();
console.log(user);
};
return (
<form onSubmit={submitHandler}>
<div className="row gx-0 mt-5">
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Title</label>
<input onChange={titleEventHandler} value={user.enteredTitle} name="enteredTitled" type="text" value={enteredTitle} className="form-control" id="title_id" required/>
</div>
</div>
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Amount</label>
<input onChange={titleEventHandler} value={user.enteredAmount} name="enteredAmount" type="number" className="form-control" id="amount_id"/>
</div>
</div>
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Date</label>
<input onChange={titleEventHandler} value={user.enteredDate} name="enteredDate" type="date" className="form-control" id="date_id"/>
</div>
</div>
</div>
<button type="submit" className="btn btn-primary m-5">Submit</button>
</form>
);
}
export default NewExpenseForm;
Changes
First i've created useState object because with objects it is easy to write and manipulate.
Secondly i've changed your titleEventHandler function with the help of that function now this code will be able to manipulate the state.
CodePudding user response:
Please try this way
import React, { useState } from "react";
const NewExpenseForm = () => {
const [enteredTitle,setEnteredTitle] = useState('');
const [enteredAmount,setEnteredAmount] = useState(0);
const [enteredDate,setEnteredDate] = useState('');
const titleEventHandler = (event) => {
setEnteredTitle(event?.target?.value);
};
const amountEventHandler = (event) => {
setEnteredAmount(event?.target?.value);
};
const dateEventHandler = (event) => {
setEnteredDate(event?.target?.input);
};
const submitHandler = (event) =>{
const data = {
title: enteredTitle,
amount: enteredAmount,
date: enteredDate
};
console.log(data);
event.preventDefault();
};
return (
<form onSubmit={submitHandler}>
<div className="row gx-0 mt-5">
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Title</label>
<input onChange={titleEventHandler} type="text" value={enteredTitle} className="form-control" id="title_id" required/>
</div>
</div>
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Amount</label>
<input onChange={amountEventHandler} type="number" className="form-control" id="amount_id"/>
</div>
</div>
<div className="col-6">
<div className="ms-5 me-5">
<label className="form-label">Date</label>
<input onChange={dateEventHandler} type="date" className="form-control" id="date_id"/>
</div>
</div>
</div>
<button type="submit" className="btn btn-primary m-5">Submit</button>
</form>
);
}
export default NewExpenseForm;