text: // how to work with multiple state
  
  import React, { Component, useState } from "react";
  
  const ExpenseForm = (props) => {
    const [enteredTitle, setEnteredTitle] = useState("");
    const [enteredAmount, setEnteredAmount] = useState("");
    const [enteredDate, setEnteredDate] = useState("");
    //     the other alternative for implementing multiple state
    //     const [userInput, setUserInput] = useState({
    //     enteredTitle: "",
    //     enteredAmount: "",
    //     enteredDate: "",
    //   });
  
    const titleChangeHandler = (event) => {
      setEnteredTitle(event.target.value);
      // the code below is good but if the state is depend on the previous state
      // it will get the outdated data
      // setUserInput({
      //   ...userInput,
      //   enteredTitle: event.target.value
      // });
      // so we use the code below instead to make sure that React will get
      // updated value
      // setUserInput((prevState) => {
      //   return { ...prevState, enteredTitle: event.target.value };
      // });
    };
  
    const amountChangeHandler = (event) => {
      setEnteredAmount(event.target.value);
      // setUserInput({
      //   ...userInput,
      //   enteredAmount: event.target.value,
      // });
    };
  
    const dateChangeHandler = (event) => {
      setEnteredDate(event.target.value);
      // setUserInput({
      //   ...userInput,
      //   enteredDate: event.target.value,
      // });
    };
  
    const submitHandler = (event) => {
      event.preventDefault(); // prevent reload page when submit the form
  
      const expenseData = {
        title: enteredTitle,
        amount: +enteredAmount,
        date: new Date(enteredDate),
      };
  
      props.onSaveExpenseData(expenseData);
  
      setEnteredTitle("");
      setEnteredAmount("");
      setEnteredDate("");
    };
  
    return (
      <form onSubmit={submitHandler}>
        <div className="NewExpense__controls">
          <div className="NewExpense__control">
            <label>Title</label>
            <input
              type="text"
              value={enteredTitle}
              onChange={titleChangeHandler}
              required
            />
          </div>
          <div className="NewExpense__control">
            <label>Amount</label>
            <input
              type="number"
              value={enteredAmount}
              onChange={amountChangeHandler}
              required
            />
          </div>
          <div className="NewExpense__control">
            <label>Date</label>
            <input
              type="date"
              min="2019-01-01"
              max="2022-12-31"
              value={enteredDate}
              onChange={dateChangeHandler}
              required
            />
          </div>
        </div>
        <div className="NewExpense__actions">
          <button type="button" onClick={props.onStop}>Cancel</button> {/*type button make pressing button not submit the form*/}
          <button type="submit">Add Expense</button>
        </div>
      </form>
    );
  };
  
  export default ExpenseForm;
  