Using React to create a Budget Manager
Tags: react, javascript, webdev, tutorial
Published: 2022-09-24 14:04:10

Keeping track of daily expenses can be difficult, especially if a lot of items are purchased. As a result, we might not be aware of where particular expenses in our budget are allocated, an app that keeps track of our spending and displays it in a concise, precise manner is therefore essential.
The prerequisites for this project are:

- Knowledge of CSS, Javascript, and React

- Latest version of Node.js installed

## Getting started
First, we create a new React app in the terminal using the code below.

```
npx create-react-app Budget manager
```
Next, we create a folder in the `src` directory to store all of our app's components and styles.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kplg4j6jfi93i7o855yu.png)

In `Parent.js` file, we import React, the hooks required for our project, and define our "Parent" component.

```javascript
import React ,{useState,useEffect} from "react";

function Parent(){
    return()
}
export default Parent
```
Next, we utilize the `usestate` hook to store the the list of purchases made and input text. 

```javascript
    const [purchases,setPurchases]=useState([])
    const [purchase,setPurchase]=useState('')
    const [dates,setDates]=useState('')
    const [category,setCategory]=useState('')
    const [cost,setCost]=useState('')
```

## Building the operations of the app 
We have to define of the activities that can be done on the app. We also define functions to update the values of the different sections of a purchase.

```javascript
    const _purchase=(e)=>{
      setPurchase(e.target.value)
    }
    const _category=(e)=>{
      setCategory(e.target.value)
    }
    const _cost=(e)=>{
      setCost(e.target.value)
    }

    const savePurchase=()=>{
      setPurchases((prevState)=>[...prevState,{
        key:uuid(),
        id:uuid(),
        purchase:purchase,
        category:category,
        date:current_date,
        cost:cost,
      }
      ]);
      setPurchase('')
      setCategory('')
      setCost('')
      setDates('')
    }

    const deletePurchase=(id)=>{
      const filteredPurchases=purchases.filter((purchase)=>{
        return purchase.id !== id;
      });
      setPurchases(filteredPurchases)
    }

    
```

In the above code:

- The `savePurchase` function appends a new object to the `purchase` array.

- The `key` and `id` are generated with [uuidv4](https://www.npmjs.com/package/uuidv4). It is set up using `npm install uuidv4` in the terminal, and the following line of code imports it into the project:

```javascript
import { v4 as uuid } from "uuid";
```

- The `deletePurchase` function takes in an `id` argument and returns a filtered `purchases` array.


## Creating a statistics section
Our app needs a statistics area to display the budget and total money spent. The cost of each purchase is added to a `totalSpent` array, and the array's sum is used to determine the total amount spent.
The `useEffect` hook is used to perform this so that the total is executed each time the `purchases` array is changed.

```javascript
    useEffect(()=>{
        const totalArray=purchases.map((item)=>{
          const value= item.cost;
          const num= parseFloat(value);
          return num
        });
        setSpent(
          totalArray.reduce((a,b)=>{
            return a+b
          },0));
    },[purchases])
```

In order to load the app, we want the proposed budget to be entered by the user. In `App.js`, we import the `Parent` component and display the app if a condition is met.

```jsx
import React,{useState} from 'react'
import Parent from './components/Parent';
function App() {
  const [budget,setBudget]=useState()
  const [page,setPage]=useState(true)
  const updateBudget=(e)=>{
    setBudget(e.target.value);
  }

  const saveBudget=()=>{
    setPage(!page)
  }

  return (
    <div className="App">
      {page? <div className='createbudget'>
            <h1>Get started by creating a new budget</h1>
            <input onChange={updateBudget} type="number"/>
            <button onClick={()=>{saveBudget()}} className="createbudget">create</button></div>
            :
      <Parent budget={budget}/>}
    </div>
  );
}

export default App;

```

The code above displays an input field when `page` is set to 'true', the `useState` hook is used to update the value of the budget variable. When the submit button is hit, the value of `page` is changed to 'false', making the app display the parent component.


## Defining our components
Next, we'll define the `Createpurchase`,`Stats`, and `Tablelist` components which will be imported to the `Parent` component. 
Our `Createpurchase` component displays a form that collects the information to be stored in a purchase, it is passed a number of props, each of which is allocated to a function in the `Parent` component

```jsx
import React from 'react'


function Createpurchase({save,pur,categ,cost,update}){
    return(
        <div className='create'>
            <h5>New Purchase</h5>
            <div>
                <label >Purchase</label>
                <input type="text" onChange={pur} value={update.pur} />
            </div>
            <div>
                <label>Category</label>
                <select onChange={categ} value={update.categ}>                    
                    <option>Housing</option>
                    <option>Food</option>
                    <option>Transportation</option>
                    <option>Utilities</option>
                    <option>Medical</option>
                    <option>Personal</option>
                </select>
            </div>
           
            <div>
                <label >Cost</label>
                <input type="number" onChange={cost} value={update.cost}/>
            </div>
            <button onClick={save}>save</button>
        </div>
    )
}

export default Createpurchase

```

The stats component displays both the total amount spent and the budget provided by the user.

```javascript
import React from 'react'


function Stats({spent,budget}){
    return(
        <div className='statistics'>
            <span>
                <h6>Spent</h6>
                <p>${spent}</p>
            </span>

            <span>
                <h6>Budget</h6>
                <p>${budget}</p>
            </span>
        </div>
    )
}



export default Stats
```


And the `Tablelist` component comprises of the structure for a purchase saved in the app.

```javascript
import React from 'react'

function Tablelist({purchase,category,date,cost,del,id}){
    return(
        <div className='list'>
            <p className='purchase'>{purchase}</p>
            <p className='category'>{category}</p>
            <p className='date'>{date}</p>
            <p className='cost'>${cost}</p>
            <button onClick={()=>del(id)}>delete</button>
        </div>
    )
}

export default Tablelist
```

The `Createpurchase`, `Stat`, and `Tablelist` components have been successfully defined, but they still need to be imported into the `Parent.js` file. We return our imported components in the `Parent` component and assign their props to our defined functions. 

```jsx
import Tablelist from "./Tablelist"
import Createpurchase from "./Createpurchase"
import Stats from "./Stats"
  function Parent({budget}){
    return(
        <div>
          <div className="dashboard">
            <Stats spent={spent} budget={budget}/>
          </div>       
          {purchases.map((row)=>(
            <Tablelist purchase={row.purchase} key={row.key} 
             category={row.category} date={row.date} cost= 
             {row.cost} del={deletePurchase} id={row.id}/>
          ))}
            <Createpurchase save={savePurchase} pur={_purchase} 
            categ={_category} cost={_cost}  update={updateValues}/>
        </div>
    )
```

## Adding a cost tracker chart
Our budget manager is almost complete, and the final thing to be added is a chart that displays the total cost spent on each category of purchase. The chart used in this project is gotten from [Recharts](https://recharts.org/en-US), it is installed with the following line of code in the terminal:

```
npm install recharts
```

To accomplish this, we first create a `Chart.js` file in our `components` folder and then import the required resources to include a chart in our app. Next, we add the chart's content.

```jsx
import React from "react";
import {PieChart,Pie,Tooltip} from 'recharts'


function Chart({data}){
  return (
      <PieChart width={300} height={300}>
        <Pie
          dataKey="value"
          isAnimationActive={false}
          data={data}
          cx="50%"
          cy="50%"
          outerRadius={80}
          fill="#6bbd99"
          label
        />
        <Tooltip />
      </PieChart>
  );
}

export default Chart
```

An array of values will be assigned to the chart's `data` prop, which will be displayed in the chart.

```javascript
<div className="chart">
    <Chart data={chartData}/>
</div>
```

`chartData` in the code above is an array that sums the total cost for each category.


## Storing purchases using `Localstorage`
We'll utilize the javascript `Localstorage` method to ensure that the purchases are not lost if the user leaves the app.

```javascript
    useEffect(()=>{
      const data=JSON.parse(localStorage.getItem('Purchases'))
      setPurchases(data)
    },[])
    useEffect(()=>{
      localStorage.setItem('Purchases',JSON.stringify(purchases))
    },[purchases])
```

The first `useEffect` hook's second argument is an empty square bracket so it runs only when the app is first loaded while the second is only carried out when the `purchases` array is modified.
Next we style our app in the `Parent.css` file located in the css folder.

![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s9tash2w445b3iqtit18.png)


## Conclusion
This article demonstrates a simple way of utilising React to build a budget manager app. We are able to do this using React hooks to store various data to be utilised later on, and also perform functions when an array is updated.
You can get the source code for this project on [Github](https://github.com/Gbadeboife/React-budget-manager) , a live demo of the site is on [Vercel](https://react-budget-manager.vercel.app/).


![](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/4oky0qt860g33mhkir4t.png)