Getting Undefined value for JavaScript object in React forms

Question

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?

Answer 1

use event.target.value instead of event.target.input

Answer 2

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

1. First i've created useState object because with objects it is easy to write and manipulate.

2. Secondly i've changed your titleEventHandler function with the help of that function now this code will be able to manipulate the state.

Answer 3

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;