Build a Dynamic React Component: Interactive Expense Tracker

Written by

javascriptfundamentals

in

Managing personal finances can often feel like navigating a complex maze. Keeping track of income, expenses, and budgets is crucial for financial health, but it can be time-consuming and prone to errors if done manually. Spreadsheets, while helpful, can become unwieldy, and existing budgeting apps may not always cater to individual needs. This tutorial will guide you through building a dynamic React component: an interactive expense tracker. This component will allow users to easily input expenses, categorize them, and visualize their spending habits, providing a clear and actionable overview of their financial situation. This project is ideal for both beginners and intermediate React developers looking to enhance their skills while creating a practical tool.

Why Build an Expense Tracker?

Creating an expense tracker is more than just a coding exercise; it’s a practical application of fundamental React concepts. Here’s why it’s a great project:

  • Practical Application: You create something useful that you can actually use.
  • Component-Based Architecture: Learn to structure your application into reusable components.
  • State Management: Understand how to manage data changes within your application.
  • User Interaction: Build interactive elements that respond to user input.
  • Data Visualization: Explore ways to present data in a clear and understandable manner.

Prerequisites

Before we dive in, ensure you have the following:

  • Node.js and npm (or yarn) installed: These are essential for managing project dependencies and running React applications.
  • A basic understanding of HTML, CSS, and JavaScript: Familiarity with these languages is necessary to grasp the concepts.
  • A code editor: Visual Studio Code, Sublime Text, or any other editor you prefer.
  • Create React App: We’ll use Create React App to set up our project quickly.

Setting Up the Project

Let’s start by creating a new React application using Create React App. Open your terminal and run the following command:

npx create-react-app expense-tracker
cd expense-tracker

This command creates a new directory called expense-tracker, installs the necessary dependencies, and sets up a basic React project structure. Navigate into the project directory using cd expense-tracker.

Project Structure

Here’s a basic overview of the project structure we’ll be using:

expense-tracker/
├── node_modules/
├── public/
│   └── ...
├── src/
│   ├── components/
│   │   ├── ExpenseForm.js
│   │   ├── ExpenseList.js
│   │   ├── ExpenseSummary.js
│   │   └── ...
│   ├── App.js
│   ├── App.css
│   ├── index.js
│   └── ...
├── .gitignore
├── package.json
└── README.md

We’ll create several components within the src/components directory to keep our code organized and modular. This structure makes the application easier to understand, maintain, and scale.

Building the ExpenseForm Component

The ExpenseForm component will be responsible for allowing users to input expense details: the expense name, amount, and category. Create a new file named ExpenseForm.js inside the src/components directory and add the following code:

import React, { useState } from 'react';

function ExpenseForm({ onAddExpense }) {
 const [expenseName, setExpenseName] = useState('');
 const [expenseAmount, setExpenseAmount] = useState('');
 const [expenseCategory, setExpenseCategory] = useState('');

 const handleSubmit = (e) => {
 e.preventDefault();
 if (!expenseName || !expenseAmount || !expenseCategory) {
 alert('Please fill in all fields.');
 return;
 }
 const newExpense = {
 id: Date.now(), // Generate a unique ID
 name: expenseName,
 amount: parseFloat(expenseAmount),
 category: expenseCategory,
 };
 onAddExpense(newExpense);
 setExpenseName('');
 setExpenseAmount('');
 setExpenseCategory('');
 };

 return (
  <form onSubmit={handleSubmit}>
  <div>
  <label htmlFor="expenseName">Expense Name:</label>
  <input
  type="text"
  id="expenseName"
  value={expenseName}
  onChange={(e) => setExpenseName(e.target.value)}
  />
  </div>
  <div>
  <label htmlFor="expenseAmount">Amount:</label>
  <input
  type="number"
  id="expenseAmount"
  value={expenseAmount}
  onChange={(e) => setExpenseAmount(e.target.value)}
  />
  </div>
  <div>
  <label htmlFor="expenseCategory">Category:</label>
  <select
  id="expenseCategory"
  value={expenseCategory}
  onChange={(e) => setExpenseCategory(e.target.value)}
  >
  <option value="">Select Category</option>
  <option value="food">Food</option>
  <option value="transportation">Transportation</option>
  <option value="housing">Housing</option>
  <option value="utilities">Utilities</option>
  <option value="entertainment">Entertainment</option>
  </select>
  </div>
  <button type="submit">Add Expense</button>
  </form>
 );
}

export default ExpenseForm;

Let’s break down the code:

  • Import React and useState: We import useState to manage the form’s input fields.
  • State Variables: We define three state variables: expenseName, expenseAmount, and expenseCategory. These variables store the values entered by the user.
  • handleSubmit Function: This function is called when the form is submitted. It prevents the default form submission behavior, validates the input, creates a new expense object, and calls the onAddExpense function (passed as a prop) to add the expense to the list. It also resets the input fields after submission.
  • JSX Structure: The component renders a form with input fields for the expense name and amount, and a select element for the expense category. The onChange event handlers update the state variables as the user types. The onSubmit event handler calls the handleSubmit function when the form is submitted.

Building the ExpenseList Component

The ExpenseList component will display the list of expenses. Create a new file named ExpenseList.js inside the src/components directory and add the following code:

import React from 'react';

function ExpenseList({ expenses }) {
 return (
  <ul>
  {expenses.map((expense) => (
  <li key={expense.id}>
  <span>{expense.name}</span> - <span>${expense.amount}</span> - <span>{expense.category}</span>
  </li>
  ))}
  </ul>
 );
}

export default ExpenseList;

Let’s break down the code:

  • Import React: We import React.
  • Expenses Prop: The component receives an expenses prop, which is an array of expense objects.
  • Mapping Expenses: The map function iterates over the expenses array and renders a <li> element for each expense. The key prop is essential for React to efficiently update the list.
  • Displaying Expense Details: Each list item displays the expense name, amount, and category.

Building the ExpenseSummary Component

The ExpenseSummary component will display a summary of the total expenses. Create a new file named ExpenseSummary.js inside the src/components directory and add the following code:

import React from 'react';

function ExpenseSummary({ expenses }) {
 const totalExpenses = expenses.reduce((sum, expense) => sum + expense.amount, 0);

 return (
  <div>
  <h3>Total Expenses: ${totalExpenses.toFixed(2)}</h3>
  </div>
 );
}

export default ExpenseSummary;

Let’s break down the code:

  • Import React: We import React.
  • Expenses Prop: The component receives an expenses prop, which is an array of expense objects.
  • Calculating Total Expenses: The reduce function calculates the sum of all expense amounts.
  • Displaying Total Expenses: The component renders the total expenses, formatted to two decimal places.

Integrating the Components in App.js

Now, let’s integrate these components into our main App.js file. Open src/App.js and replace its contents with the following code:

import React, { useState } from 'react';
import ExpenseForm from './components/ExpenseForm';
import ExpenseList from './components/ExpenseList';
import ExpenseSummary from './components/ExpenseSummary';
import './App.css';

function App() {
 const [expenses, setExpenses] = useState([]);

 const addExpense = (newExpense) => {
 setExpenses([...expenses, newExpense]);
 };

 return (
  <div className="container">
  <h1>Expense Tracker</h1>
  <ExpenseForm onAddExpense={addExpense} />
  <ExpenseSummary expenses={expenses} />
  <ExpenseList expenses={expenses} />
  </div>
 );
}

export default App;

Let’s break down the code:

  • Import Components: We import ExpenseForm, ExpenseList, and ExpenseSummary.
  • State Management: We use the useState hook to manage the expenses state, which is an array of expense objects.
  • addExpense Function: This function updates the expenses state by adding a new expense to the array.
  • JSX Structure: The App component renders the ExpenseForm, ExpenseSummary, and ExpenseList components. The onAddExpense prop is passed to ExpenseForm, and the expenses prop is passed to ExpenseSummary and ExpenseList.

Styling the Application (App.css)

To make the application visually appealing, add some basic styles to src/App.css. Replace the existing content with the following:

.container {
 max-width: 800px;
 margin: 20px auto;
 padding: 20px;
 border: 1px solid #ccc;
 border-radius: 5px;
}

h1 {
 text-align: center;
}

form {
 margin-bottom: 20px;
}

label {
 display: block;
 margin-bottom: 5px;
 font-weight: bold;
}

input[type="text"], input[type="number"], select {
 width: 100%;
 padding: 8px;
 margin-bottom: 10px;
 border: 1px solid #ccc;
 border-radius: 4px;
 box-sizing: border-box;
}

button {
 background-color: #4CAF50;
 color: white;
 padding: 10px 20px;
 border: none;
 border-radius: 4px;
 cursor: pointer;
}

button:hover {
 background-color: #3e8e41;
}

ul {
 list-style: none;
 padding: 0;
}

li {
 padding: 10px;
 border-bottom: 1px solid #eee;
}

This CSS provides basic styling for the layout, form elements, and list items, making the application more user-friendly.

Running the Application

To run the application, navigate to your project directory in the terminal and run the following command:

npm start

This command starts the development server, and the application should open in your default web browser at http://localhost:3000 (or another available port). You should now see the expense tracker application, where you can enter expenses and see them listed.

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Incorrect Imports: Double-check your import statements to ensure you’re importing the correct components and modules.
  • Missing Props: Make sure you’re passing the necessary props to your components. For example, the ExpenseList component requires an expenses prop.
  • State Updates: When updating state, be sure to use the correct syntax. For example, use the spread operator (...) to add items to an array: setExpenses([...expenses, newExpense]).
  • Typographical Errors: Carefully check for any typos in your code, as these can lead to unexpected behavior.
  • Console Errors: Open your browser’s developer console (usually by pressing F12) to check for any error messages. These can provide valuable clues about what’s going wrong.

Enhancements and Next Steps

This is a basic expense tracker, but there are many ways you can enhance it:

  • Data Persistence: Implement local storage or a database to save expense data so it persists across sessions.
  • Data Visualization: Use a charting library (like Chart.js or Recharts) to visualize expense data in charts and graphs.
  • Filtering and Sorting: Add features to filter and sort expenses by category, date, or amount.
  • User Authentication: Implement user accounts and authentication to allow multiple users to use the application.
  • More Categories: Add more expense categories.

Summary / Key Takeaways

In this tutorial, you’ve learned how to build a basic expense tracker using React. You’ve learned how to:

  • Create and use functional components.
  • Manage state using the useState hook.
  • Handle user input and form submissions.
  • Pass data between components using props.
  • Structure a React application into reusable components.
  • Style React components using CSS.

By building this application, you’ve gained practical experience with fundamental React concepts and built a useful tool that you can customize and extend further.

FAQ

Q: How do I handle errors in the application?

A: You can add error handling by using try/catch blocks within your functions or by displaying error messages to the user if an API call fails or if the data is invalid. You can also use the browser’s developer console to check for errors.

Q: How can I add a date picker to the form?

A: You can use a date picker library like react-datepicker. Install it using npm or yarn, import it into your ExpenseForm component, and use it to render a date input field.

Q: How can I deploy this application?

A: You can deploy your React application to platforms like Netlify, Vercel, or GitHub Pages. These platforms provide simple deployment processes. You’ll typically need to build your application (npm run build) and then deploy the contents of the build directory.

Q: How can I persist the data?

A: You can use local storage, session storage, or a database (like Firebase or MongoDB) to store the data. For local storage, you can use the localStorage API to save and retrieve data as JSON strings.

Final Thoughts

Building this expense tracker provides a solid foundation for understanding and working with React. The modular design, state management, and user interaction aspects are all fundamental to creating dynamic and engaging web applications. As you continue to explore React, remember that practice is key. Experiment with different features, refactor your code, and always strive to improve your understanding of React’s core principles. The ability to build interactive applications is a valuable skill in today’s web development landscape, and with each project, you will become more proficient and confident in your abilities.

More posts