Using Stateful Lists in React

Back to: ReactJS Tutorials

Using Stateful Lists in React with Examples:

I will discuss Using Stateful Lists in React with Examples in this article. Please read our previous article discussing Rendering Lists of Data in React. Now, we will discuss updating the expenses array whenever a new expense is added.

How to add a new expense to the expenses array?

For this, we need to go to the App.js because the expenses array is present in App.js. We also have the addExpenseHandler function, which we added in the last section.

This function is triggered whenever a new expense is added. And we even received the expense as a parameter in this function. So, all we have to do is we have to add this expense to the expenses array.

But if we edit it as we did in the expenses array (id, title, amount, date), this will not work because we already learned that React wouldn’t update the component just because we changed some variable. Instead, to achieve that, we need to use state. And therefore, in App.js, where we manage our expenses, we will import useState from React to register some states here.

Move expenses array out of the App Function:

Let’s move the expenses array out of the App function. Now, we rename it to TEST_EXPENSES,

We renamed it because, initially, we are storing some test expenses in this array. Now, inside the App component function, we’ll call useState, and we’ll pass the TEST_EXPENSES array as an initial state value so that we have some initial expenses to display.

Again, we’ll use de-structuring, as we showed you in the last section, to access our expenses and the setExpenses state updating function.

As we called useState, inside the addExpenseHandler function where we want to add a new expense, we can call setExpenses to set our expenses array to a new array that includes the new expense. Note that the expenses variable will hold the current state value, and the setExpenses variable will be used to update the state.

So, how should we update the array?

Well, we can pass a new array ([]) in the setExpenses function, and then let’s say we want to add the new expense as the first item in the array. For that, we can add the expense (our new expense that is passed as a parameter to the addExpenseHandler function) as an item to the new array and then use the spread operator on the existing expenses to pull out all the existing array elements and populate the new array with those existing elements.

Special Function Form for state updation:

We can use the spread operator (…) not just on objects but also on arrays. And again, that’s not a React feature. This is a standard JavaScript feature. However, if we update the state like this, it would not really be correct, as you learned in the last core section.

Instead, if you update your state depending on the previous state or the previous snapshot of this state, you should use the special function form for this state updating function. So, it will pass a function as an argument to this state updating function, and that function will automatically receive the latest state snapshot. So, we will get our previous expenses automatically by React and return our new array where we added the new expense we’re getting as a parameter.

This is the clean way of updating our state when it’s based on an older snapshot of that same state. Now, with that, we have added our new expense. And now, since we’re using our expenses state in div of return to pass it to expenses,

We should automatically have a dynamic list that automatically updates when items are added. So, if we add a Pen as the title, 50.38 as the amount, and 23-08-2023,

And now, hit on ‘Add Expense’,

Here, we can see that a new expense is added as a first item to the existing array. So this is working, and now this is a truly dynamic list by using state and by outputting these items with this map method.

That’s how you output lists of data dynamically with React. In the next article, we will discuss keys and have a look at the below key warning and what that is all about.

App.js:

import React from "react";
import { useState } from "react";
import Expenses from "./components/Expenses/Expenses";
import NewExpense from "./components/NewExpense/NewExpense";

const TEST_EXPENSES = [
  {
    id: "e1",
    title: "Household Expense",
    amount: 25000,
    date: new Date(2023, 4, 27),
  },
  {
    id: "e2",
    title: "Travel Expense",
    amount: 1300,
    date: new Date(2023, 5, 28),
  },
  {
    id: "e3",
    title: "Education fees",
    amount: 5000,
    date: new Date(2023, 6, 29),
  },
];

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

  const addExpenseHandler = (expense) => {
    setExpenses((prevExpenses) => {
      return [expense, ...prevExpenses];
    });
  };

  return (
    <div>
      <NewExpense onAddExpense={addExpenseHandler} />

      <Expenses items={expenses} />
    </div>
  );
};

export default App;

In the next article, I will discuss Understanding Keys in React. In this article, I try to explain Using Stateful Lists in React with Examples. I hope you enjoy this Using Stateful Lists in React article.