Added ExpenseList component

Author: svwoodhouse

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

@@ -4,13 +4,15 @@ import Card from '../UI/Card'
 
 const ExpenseItem = (props) => {
     return (
-        <Card className="expense-item">
-            <ExpenseDate date={props.date}/>
-            <div className="expense-item__description">
-                <h2>{props.title}</h2>
-                <div className="expense-item__price">${props.amount}</div>
-            </div>
-        </Card>
+        <li>
+            <Card className="expense-item">
+                <ExpenseDate date={props.date}/>
+                <div className="expense-item__description">
+                    <h2>{props.title}</h2>
+                    <div className="expense-item__price">${props.amount}</div>
+                </div>
+            </Card>
+        </li>
     )
 }
 

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

@@ -1,5 +1,5 @@
 import './Expenses.css'
-import ExpenseItem from './ExpenseItem'
+import ExpensesList from './ExpensesList'
 import Card from '../UI/Card'
 import ExpensesFilter from './ExpensesFilter'
 import { useState } from 'react'
@@ -15,24 +15,11 @@ const Expenses = (props) => {
         return expense.date.getFullYear().toString() === filteredYear;
     })
 
-    let expensesContent = <p>No expenses Found</p>
-
-    if(filteredExpenses.length > 0) {
-        expensesContent = filteredExpenses.map((expense) => (
-            <ExpenseItem 
-                title={expense.title} 
-                amount={expense.amount} 
-                date={expense.date}
-                key={expense.id}
-            />
-        ))
-    }
-
     return(
         <div>
             <Card className='expenses'>
                 <ExpensesFilter selected={filteredYear} onChangeFilter={filterChangeHandler}/>
-                {expensesContent}
+                <ExpensesList items = {filteredExpenses}/>
             </Card>
         </div>
     )

Sections/Section 3/01-starting-setup/src/components/Expenses/ExpensesList.css

@@ -0,0 +1,9 @@
+.expenses-list {
+    list-style: none;
+    padding: 0;
+  }
+  
+  .expenses-list__fallback {
+    color: white;
+    text-align: center;
+  }

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

@@ -0,0 +1,20 @@
+import ExpenseItem from './ExpenseItem'
+import './ExpensesList.css'
+const ExpensesList = props => {
+    if(props.items.length === 0){
+        return <h2 className='expenses-list__fallback'>Found no expenses.</h2>
+    }
+
+    return <ul className='expenses-list'>
+        {props.items.map((expense) => (
+            <ExpenseItem 
+                title={expense.title} 
+                amount={expense.amount} 
+                date={expense.date}
+                key={expense.id}
+            />
+        ))}
+    </ul>
+}
+
+export default ExpensesList