expense form

react-complete-guide/react-complete-notes.md

@@ -73,3 +73,79 @@ React adds its own event attribute to use in JSX elements
 
 Each event starts with "on" and pops in Intellisense
 
+```
+<button onClick={clickHandler}>Change Title</button>
+
+const clickHandler = () => {
+        setTitle('Updated!');
+        console.log(title);
+    };
+```
+
+### State
+
+Uses a variable and a method to store and update information on the screen
+
+Work with state using the built-in method useState()
+
+```
+const [title, setTitle] = useState(props.title);
+
+const clickHandler = () => {
+    setTitle('Updated!');
+    console.log(title);
+};
+```
+
+If your form has a lot of fields to track there are two ways of using state.
+
+1. The more common approach is to have everything outlined individually
+
+```
+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);
+};
+```
+
+2. The less common way is to use an object
+```
+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};
+    });
+};
+```
+
+### Form Handlers
+
+```
+const submitHandler = (event) => {};
+
+return <form onSubmit={submitHandler}>
+```

react-complete-guide/src/components/NewExpense/ExpenseForm.js

@@ -1,41 +1,55 @@
-import React, {useState} from "react";
+import React, { useState } from 'react';
 
-import "./ExpenseForm.css";
+import './ExpenseForm.css';
 
-const ExpenseForm = (props) => {
+const ExpenseForm = () => {
-    const [enteredTitle, setEnteredTitle] = useState('');
+  const [enteredTitle, setEnteredTitle] = useState('');
-    const [enteredAmount, setEnteredAmount] = useState('');
+  const [enteredAmount, setEnteredAmount] = useState('');
-    const [enteredDate, setEnteredDate] = useState('');
+  const [enteredDate, setEnteredDate] = useState('');
 
-    const titleChangeHandler = (event) => {
+  const titleChangeHandler = (event) => {
-        setEnteredTitle(event.target.value);
+    setEnteredTitle(event.target.value);
-    };
+  };
-    const amountChangeHandler = (event) => {
-        setEnteredAmount(event.target.value);
-    };
-    const dateChangeHandler = (event) => {
-        setEnteredDate(event.target.value);
-    };
 
-    return <form>
+  const amountChangeHandler = (event) => {
-        <div className="new-expense__controls">
+    setEnteredAmount(event.target.value);
-            <div className="new-expense__control">
+  };
-                <label>Title</label>
+
-                <input type="text" onChange={titleChangeHandler} />
+  const dateChangeHandler = (event) => {
-            </div>
+    setEnteredDate(event.target.value);
-            <div className="new-expense__control">
+  };
-                <label>Amount</label>
+
-                <input type="number" min="0.01" step="0.01" onChange={amountChangeHandler} />
+  return (
-            </div>
+    <form>
-            <div className="new-expense__control">
+      <div className='new-expense__controls'>
-                <label>Date</label>
+        <div className='new-expense__control'>
-                <input type="date" min="2019-01-01" max="2022-12-31" onChange={dateChangeHandler} />
+          <label>Title</label>
-            </div>  
+          <input type='text' onChange={titleChangeHandler} />
+        </div>
+        <div className='new-expense__control'>
+          <label>Amount</label>
+          <input
+            type='number'
+            min='0.01'
+            step='0.01'
+            onChange={amountChangeHandler}
+          />
         </div>
-        <div className="new-expense__actions">
+        <div className='new-expense__control'>
-            <button type="submit">Add Expense</button>
+          <label>Date</label>
+          <input
+            type='date'
+            min='2019-01-01'
+            max='2022-12-31'
+            onChange={dateChangeHandler}
+          />
         </div>
+      </div>
+      <div className='new-expense__actions'>
+        <button type='submit'>Add Expense</button>
+      </div>
     </form>
-}
+  );
+};
 
 export default ExpenseForm;