Project 1 - Expense tracker
// AddExpense.js
import React, { useState } from 'react'
const AddExpense = ({ onAddExpense }) => {
const [expense, setExpense] = useState({ name: '', amount: '', month: '' })
const onSubmit = (e) => {
e.preventDefault()
if (!expense.name || !expense.amount || !expense.month) {
alert('Please fill out all fields')
return
}
onAddExpense(expense)
setExpense({ name: '', amount: '', month: '' })
}
return (
<form onSubmit={onSubmit}>
<label>Name</label>
<input type="text" value={expense.name} onChange={(e) => setExpense({ ...expense, name: e.target.value })} />
<label>Amount</label>
<input type="number" value={expense.amount} onChange={(e) => setExpense({ ...expense, amount: e.target.value })} />
<label>Month</label>
<input type="text" value={expense.month} onChange={(e) => setExpense({ ...expense, month: e.target.value })} />
<button type="submit">Add Expense</button>
</form>
)
}
export default AddExpense
// UpdateExpense.js
import React, { useState, useEffect } from 'react'
const UpdateExpense = ({ currentExpense, onUpdateExpense, onCancelUpdate }) => {
const [expense, setExpense] = useState(currentExpense)
useEffect(() => {
setExpense(currentExpense)
}, [currentExpense])
const onSubmit = (e) => {
e.preventDefault()
if (!expense.name || !expense.amount || !expense.month) {
alert('Please fill out all fields')
return
}
onUpdateExpense(expense)
}
return (
<form onSubmit={onSubmit}>
<label>Name</label>
<input type="text" value={expense.name} onChange={(e) => setExpense({ ...expense, name: e.target.value })} />
<label>Amount</label>
<input type="number" value={expense.amount} onChange={(e) => setExpense({ ...expense, amount: e.target.value })} />
<label>Month</label>
<input type="text" value={expense.month} onChange={(e) => setExpense({ ...expense, month: e.target.value })} />
<button type="submit">Update Expense</button>
<button type="button" onClick={onCancelUpdate}>Cancel</button>
</form>
)
}
export default UpdateExpense
// ExpenseList.js
import React from 'react'
const ExpenseList = ({ expenses, onDeleteExpense, onUpdateExpense }) => {
return (
<ul>
{expenses.map((expense) => (
<li key={expense.id}>
{expense.name} - ${expense.amount} - {expense.month}
<button onClick={() => onDeleteExpense(expense.id)}>Delete</button>
<button onClick={() => onUpdateExpense(expense)}>Update</button>
</li>
))}
</ul>
)
}
export default ExpenseList
//App.js
import React, { useState } from 'react';
import './App.css';
import ExpenseForm from './components/ExpenseForm';
import ExpenseList from './components/ExpenseList';
import ExpensesChart from './components/ExpensesChart';
const DUMMY_EXPENSES = [
{
id: 'e1',
title: 'Toilet Paper',
amount: 94.12,
date: new Date(2020, 7, 14),
},
{
id: 'e2',
title: 'New TV',
amount: 799.49,
date: new Date(2021, 2, 12),
},
{
id: 'e3',
title: 'Car Insurance',
amount: 294.67,
date: new Date(2021, 2, 28),
},
{
id: 'e4',
title: 'New Desk (Wooden)',
amount: 450,
date: new Date(2021, 5, 12),
},
];
const App = () => {
const [expenses, setExpenses] = useState(DUMMY_EXPENSES);
const addExpenseHandler = (expense) => {
setExpenses((prevExpenses) => {
return [expense, ...prevExpenses];
});
};
const deleteExpenseHandler = (expenseId) => {
setExpenses((prevExpenses) => {
return prevExpenses.filter((expense) => expense.id !== expenseId);
});
};
return (
<div className="App">
<ExpenseForm onAddExpense={addExpenseHandler} />
<ExpensesChart expenses={expenses} />
<ExpenseList items={expenses} onDeleteExpense={deleteExpenseHandler} />
</div>
);
};
export default App;