Adding Add Expense conditional modal

Author: svwoodhouse

Sections/Section 3/01-starting-setup/src/components/Expenses/ExpensesFilter.js

@@ -3,7 +3,6 @@ import './ExpensesFilter.css';
 
 const ExpensesFilter = (props) => {
 const dropdownChangeHandler = (event) => {
-  console.log(event.target.value)
   props.onChangeFilter(event.target.value)
 }
   return (

Sections/Section 3/01-starting-setup/src/components/NewExpense/ExpenseForm.js

@@ -50,28 +50,45 @@ const ExpenseForm = (props) => {
         setEnteredDate('')
 
     }
+    const [showAddExpensePanel, setShowAddExpensePanel] = useState(true)
+
+    const showingAddExpensePanel = () => {
+        setShowAddExpensePanel(current => !current)
+    }
 
     return ( 
-        <form onSubmit={submitHandler}>
-            <div className='new-expense__controls'>
-                <div className='new-expense__control'>
-                    <label>Title</label>
-                    <input type='text' value={enteredTitle} onChange={titleChangeHandler}/>
+        <>
+        { 
+            showAddExpensePanel && 
+                <div className='new-expense__actions'>
+                    <button type='button' onClick={showingAddExpensePanel}>Add Expense</button>
                 </div>
-                <div className='new-expense__control'>
-                    <label>Amount</label>
-                    <input type='number' min="0.01" step="0.01" value={enteredAmount} onChange={amountChangeHandler}/>
+        }
+        {
+            !showAddExpensePanel &&
+            <form onSubmit={submitHandler}>
+                <div className='new-expense__controls'>
+                    <div className='new-expense__control'>
+                        <label>Title</label>
+                        <input type='text' value={enteredTitle} onChange={titleChangeHandler}/>
+                    </div>
+                    <div className='new-expense__control'>
+                        <label>Amount</label>
+                        <input type='number' min="0.01" step="0.01" value={enteredAmount} onChange={amountChangeHandler}/>
+                    </div>
+                    <div className='new-expense__control'>
+                        <label>Date</label>
+                        <input type='date' min="2022-01-01" max="2024-12-31" value={enteredDate} onChange={dateChangeHandler}/>
+                    </div>
                 </div>
-                <div className='new-expense__control'>
-                    <label>Date</label>
-                    <input type='date' min="2022-01-01" max="2024-12-31" value={enteredDate} onChange={dateChangeHandler}/>
+                <div className='new-expense__actions'>
+                    <button type='submit'>Add Expense</button>
+                    <button type='button' onClick={showingAddExpensePanel}>Cancel</button>
                 </div>
-            </div>
-            <div className='new-expense__actions'>
-                <button type='submit'>Add Expense</button>
-            </div>
-        </form>
-    )
-}
+            </form>
+        }
+        </>
+        )
+    }
 
 export default ExpenseForm