Simple expense tracker using React hooks & context
This is a React version of the vanilla JS Expense Tracker. It uses functional components with hooks and the context API
npm install
# Run on http://localhost:3000
npm start
# Build for prod
npm run build
![dependabot[bot] avatar](https://avatars.githubusercontent.com/in/29110?v=4 "dependabot[bot]")
src\context\AppReducer.js
Line 1:1: Assign arrow function to a variable before exporting as module default import/no-anonymous-default-export
shows error undefined
import { Header } from './components/Header';
import { Balance } from './components/Balance';
import { IncomeExpenses } from './components/IncomeExpenses';
import { TransactionList } from './components/TransactionList';
import { AddTransaction } from './components/AddTransaction';
import { GlobalProvider } from './context/GlobalState';
// css imports
import './App.css';
function App() {
return (
<GlobalProvider>
<Header />
<div className="container">
<Balance />
<IncomeExpenses />
<TransactionList />
<AddTransaction />
</div>
</GlobalProvider>
);
}
export default App;
app is showing nothing in the browser after this addition. please help.
I've played a bit around with your nice app.
Thanks for sharing it here.
I've found that in case of negative balance the - is missing in front of the value.
I've fixed this with my PR #24
BTW:
If you cherish this PR, please add a label to the aprove of the PR named : 'hacktoberfest-accepted'
Thanx.
The following line in Balance component:
const balance = amounts.reduce((acc, amount) => acc + amount).toFixed(2);
throws this error if the transactions list is empty:
TypeError: Reduce of empty array with no initial value
I have updated the line with this:
const balance = amounts.length > 0 ? amounts.reduce((acc, amount) => acc + amount).toFixed(2) : 0;
Same error occurs for same reason for the following lines in IncomeExpenses component:
const income = amounts.filter(amount => amount > 0).reduce((acc, amount) => acc + amount).toFixed(2);
const expense = (amounts.filter(amount => amount < 0).reduce((acc, amount) => acc + amount) * -1).toFixed(2);
I have updated those lines with these:
const income = amounts.length > 0 && amounts.filter(amount => amount > 0).length > 0 ? amounts.filter(amount => amount > 0).reduce((acc, amount) => acc + amount).toFixed(2) : 0.00;
const expense = amounts.length > 0 && amounts.filter(amount => amount < 0).length > 0 ? (amounts.filter(amount => amount < 0).reduce((acc, amount) => acc + amount) * -1).toFixed(2) : 0.00;
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
Django
The Web framework for perfectionists with deadlines.
Laravel
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
Microsoft
Open source projects and samples from Microsoft.
Google
Google ❤️ Open Source for everyone.
Alibaba
Alibaba Open Source for everyone
D3
Data-Driven Documents codes.
Tencent
China tencent open source team.