ReactJS Introduce Events in Expense Manager APP

← ReactJS Creating an Event Aware Component

Last modified on: September 7, 2025

<h1 data-start="440" data-end="496"><strong data-start="442" data-end="496">ReactJS: Introducing Events in Expense Manager App</strong></h1>
<p data-start="498" data-end="692">An Expense Manager App lets users <strong data-start="532" data-end="567">add, track, and manage expenses</strong>. Handling <strong data-start="578" data-end="588">events</strong> is essential for <strong data-start="606" data-end="691">capturing user input, submitting forms, and updating the expense list dynamically</strong>.</p>
<hr data-start="694" data-end="697" />
<h2 data-start="699" data-end="729"><strong data-start="702" data-end="729">1. Setting Up the State</strong></h2>
<p data-start="731" data-end="799">We need to maintain <strong data-start="751" data-end="763">expenses</strong> and <strong data-start="768" data-end="789">form input values</strong> in state.</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>import React, { useState } from "react";

function ExpenseManager() {
  const [expenses, setExpenses] = useState([]);
  const [expenseName, setExpenseName] = useState("");
  const [amount, setAmount] = useState("");

return &lt;div&gt;Expense Manager App&lt;/div&gt;;
}

export default ExpenseManager;
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="1105" data-end="1108" />
<h2 data-start="1110" data-end="1141"><strong data-start="1113" data-end="1141">2. Handling Input Events</strong></h2>
<p data-start="1143" data-end="1212">Use <code data-start="1147" data-end="1157">onChange</code> to <strong data-start="1161" data-end="1183">capture user input</strong> for expense name and amount.</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>&lt;input
  type="text"
  placeholder="Expense Name"
  value={expenseName}
  onChange={(e) =&gt; setExpenseName(e.target.value)}
/&gt;

&lt;input
  type="number"
  placeholder="Amount"
  value={amount}
  onChange={(e) =&gt; setAmount(e.target.value)}
/&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1465" data-end="1483"><strong data-start="1465" data-end="1481">Explanation:</strong></p>
<ul data-start="1484" data-end="1607">
<li data-start="1484" data-end="1537">
<p data-start="1486" data-end="1537"><code data-start="1486" data-end="1496">onChange</code> updates state whenever the user types.</p>
</li>
<li data-start="1538" data-end="1607">
<p data-start="1540" data-end="1607">Controlled components ensure the <strong data-start="1573" data-end="1606">input value matches the state</strong>.</p>
</li>
</ul>
<hr data-start="1609" data-end="1612" />
<h2 data-start="1614" data-end="1648"><strong data-start="1617" data-end="1648">3. Handling Form Submission</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const handleAddExpense = (e) =&gt; {
  e.preventDefault(); // Prevent page reload
  if (expenseName &amp;&amp; amount) {
    setExpenses([...expenses, { name: expenseName, amount: parseFloat(amount) }]);
    setExpenseName(""); // Clear input
    setAmount("");      // Clear input
  }
};
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="1940" data-end="1953"><strong data-start="1940" data-end="1953">Form JSX:</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>&lt;form onSubmit={handleAddExpense}&gt;
  &lt;input
    type="text"
    placeholder="Expense Name"
    value={expenseName}
    onChange={(e) =&gt; setExpenseName(e.target.value)}
  /&gt;
  &lt;input
    type="number"
    placeholder="Amount"
    value={amount}
    onChange={(e) =&gt; setAmount(e.target.value)}
  /&gt;
  &lt;button type="submit"&gt;Add Expense&lt;/button&gt;
&lt;/form&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2316" data-end="2334"><strong data-start="2316" data-end="2332">Explanation:</strong></p>
<ul data-start="2335" data-end="2477">
<li data-start="2335" data-end="2374">
<p data-start="2337" data-end="2374"><code data-start="2337" data-end="2347">onSubmit</code> handles form submission.</p>
</li>
<li data-start="2375" data-end="2438">
<p data-start="2377" data-end="2438">State is updated using <code data-start="2400" data-end="2413">setExpenses</code>, adding a new expense.</p>
</li>
<li data-start="2439" data-end="2477">
<p data-start="2441" data-end="2477">Inputs are cleared after submission.</p>
</li>
</ul>
<hr data-start="2479" data-end="2482" />
<h2 data-start="2484" data-end="2515"><strong data-start="2487" data-end="2515">4. Handling Delete Event</strong></h2>
<p data-start="2517" data-end="2568">Allow users to <strong data-start="2532" data-end="2553">remove an expense</strong> from the list.</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const handleDeleteExpense = (index) =&gt; {
  const updatedExpenses = expenses.filter((_, i) =&gt; i !== index);
  setExpenses(updatedExpenses);
};
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2724" data-end="2764"><strong data-start="2724" data-end="2764">Display Expenses with Delete Button:</strong></p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>&lt;ul&gt;
  {expenses.map((expense, index) =&gt; (
    &lt;li key={index}&gt;
      {expense.name} - ${expense.amount}
      &lt;button onClick={() =&gt; handleDeleteExpense(index)}&gt;Delete&lt;/button&gt;
    &lt;/li&gt;
  ))}
&lt;/ul&gt;
</code></pre>
</div>
</div>
</div>
</div>
<p data-start="2977" data-end="2995"><strong data-start="2977" data-end="2993">Explanation:</strong></p>
<ul data-start="2996" data-end="3130">
<li data-start="2996" data-end="3070">
<p data-start="2998" data-end="3070"><code data-start="2998" data-end="3007">onClick</code> on Delete button removes the expense by filtering the array.</p>
</li>
<li data-start="3071" data-end="3130">
<p data-start="3073" data-end="3130">Component re-renders automatically with the updated list.</p>
</li>
</ul>
<hr data-start="3132" data-end="3135" />
<h2 data-start="3137" data-end="3178"><strong data-start="3140" data-end="3178">5. Handling Input Validation Event</strong></h2>
<p data-start="3180" data-end="3254">Add simple validation to prevent <strong data-start="3213" data-end="3229">empty inputs</strong> or <strong data-start="3233" data-end="3253">negative amounts</strong>:</p>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>const handleAddExpense = (e) =&gt; {
  e.preventDefault();
  if (!expenseName || !amount || amount &lt;= 0) {
    alert("Please enter valid expense details");
    return;
  }
  setExpenses([...expenses, { name: expenseName, amount: parseFloat(amount) }]);
  setExpenseName("");
  setAmount("");
};
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="3560" data-end="3563" />
<h2 data-start="3565" data-end="3613"><strong data-start="3568" data-end="3613">6. Full Expense Manager Component Example</strong></h2>
<div class="contain-inline-size rounded-2xl relative bg-token-sidebar-surface-primary">
<div class="sticky top-9">
<div class="absolute end-0 bottom-0 flex h-9 items-center pe-2">
<div class="bg-token-bg-elevated-secondary text-token-text-secondary flex items-center gap-4 rounded-sm px-2 font-sans text-xs">
<pre class="language-javascript"><code>function ExpenseManager() {
  const [expenses, setExpenses] = useState([]);
  const [expenseName, setExpenseName] = useState("");
  const [amount, setAmount] = useState("");

const handleDeleteExpense = (index) =&gt; {
    setExpenses(expenses.filter((_, i) =&gt; i !== index));
  };

return (
    &lt;div&gt;
      &lt;h1&gt;Expense Manager&lt;/h1&gt;
      &lt;form onSubmit={handleAddExpense}&gt;
        &lt;input
          type="text"
          placeholder="Expense Name"
          value={expenseName}
          onChange={(e) =&gt; setExpenseName(e.target.value)}
        /&gt;
        &lt;input
          type="number"
          placeholder="Amount"
          value={amount}
          onChange={(e) =&gt; setAmount(e.target.value)}
        /&gt;
        &lt;button type="submit"&gt;Add Expense&lt;/button&gt;
      &lt;/form&gt;
      &lt;ul&gt;
        {expenses.map((expense, index) =&gt; (
          &lt;li key={index}&gt;
            {expense.name} - ${expense.amount}
            &lt;button onClick={() =&gt; handleDeleteExpense(index)}&gt;Delete&lt;/button&gt;
          &lt;/li&gt;
        ))}
      &lt;/ul&gt;
    &lt;/div&gt;
  );
}
</code></pre>
</div>
</div>
</div>
</div>
<hr data-start="4979" data-end="4982" />
<h2 data-start="4984" data-end="5001"><strong data-start="4987" data-end="5001">7. Summary</strong></h2>
<ul data-start="5002" data-end="5323">
<li data-start="5002" data-end="5056">
<p data-start="5004" data-end="5056"><strong data-start="5004" data-end="5020">Input events</strong> (<code data-start="5022" data-end="5032">onChange</code>) capture user typing.</p>
</li>
<li data-start="5057" data-end="5124">
<p data-start="5059" data-end="5124"><strong data-start="5059" data-end="5085">Form submission events</strong> (<code data-start="5087" data-end="5097">onSubmit</code>) handle adding expenses.</p>
</li>
<li data-start="5125" data-end="5174">
<p data-start="5127" data-end="5174"><strong data-start="5127" data-end="5143">Click events</strong> (<code data-start="5145" data-end="5154">onClick</code>) handle deletion.</p>
</li>
<li data-start="5175" data-end="5242">
<p data-start="5177" data-end="5242"><strong data-start="5177" data-end="5194">State updates</strong> trigger automatic re-render of the component.</p>
</li>
<li data-start="5243" data-end="5323">
<p data-start="5245" data-end="5323">Event-aware components make the Expense Manager <strong data-start="5293" data-end="5320">interactive and dynamic</strong>.</p>
</li>
</ul>

Web Technology View More