Scribd
Upload
13 views

Expenses Form

Uploaded by

Saic Petchbut
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
13 views

Expenses Form

Uploaded by

Saic Petchbut
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

6/7/65 10:51 tmpdgf_f51p.

html

import React, { useState } from "react";

import "./ExpenseForm.css";

const ExpenseForm = (props) => {


const [enteredTitle, setEnteredTitle] = useState("");
const [enteredAmount, setEnteredAmount] = useState("");
const [enteredDate, setEnteredDate] = useState("");

const titleChangeHandler = (event) => {


setEnteredTitle(event.target.value);
};
const amountChangeHandler = (event) => {
setEnteredAmount(event.target.value);
};
const dateChangeHandler = (event) => {
setEnteredDate(event.target.value);
});
};

const submitHandler = (event) => {


event.preventDefault();

const expenseData = {
title: enteredTitle,
amount: enteredAmount,
date: new Date(enteredDate),
};

props.onSaveExpenseData(expenseData);
setEnteredTitle("");
setEnteredAmount("");
setEnteredDate("");
};

return (
<form onSubmit={submitHandler}>
<div className="new-expense__controls">
<div className="new-expense__controls">
<label>Title</label>
<input
type="text"
value={enteredTitle}
onChange={titleChangeHandler}
/>
</div>
<div className="new-expense__controls">
<label>Amount</label>
<input
type="number"
min="0.01"
step="0.01"
value={enteredAmount}
file:///C:/Users/Welcome/AppData/Local/Temp/tmpdgf_f51p.html 1/2
6/7/65 10:51 tmpdgf_f51p.html

onChange={amountChangeHandler}
/>
</div>
<div className="new-expense__controls">
<label>Date</label>
<input
type="date"
min="2019-01-01"
step="2022.12.31"
value={enteredDate}
onChange={dateChangeHandler}
/>
</div>
<div className="new-expense__actions">
<button type="submit">Add Expense</button>
</div>
</div>
</form>
);
};

export default ExpenseForm;

file:///C:/Users/Welcome/AppData/Local/Temp/tmpdgf_f51p.html 2/2

You might also like