Rendering Lists of Data in React

Back to: ReactJS Tutorials

Rendering Lists of Data in React:

In this article, I am going to discuss Rendering Lists of Data in React with Examples. In our project, we already have a list of data here.

But this list is static. It’s not dynamic. For example, if we use a filter, this does not affect the list; if we add a new item, it will not be added to the list because we haven’t added the logic for this yet. So, that’s what we’re going to do; therefore, here in this application, we want to continue working on this feature. In the Expenses.js file, we currently render our list of expenses by individually adding these expense item elements in our JSX code,

This is not dynamic at all. In most web applications, we don’t know in advance how many items we want to render. For example, we don’t know how many expenses the user is going to add and how many expenses should be displayed when a certain year is selected. Therefore, hard coding. the number of expense items we’re currently doing is definitely not the way to go. Instead, we want to render that list dynamically and do that as a standard case, which you’ll face in a lot of projects and applications. It is also straightforward to do with React.

How Does This Work?

We want to render our expenses, which are defined in App.js.

Here, we got this expenses array, and we want to render this in the Expenses component. Therefore, the first step is to pass our expenses down via props, which we’re already doing.

We are passing the items prop that points at the expenses array. So, in the expenses component, we get a list of our expenses, but we are not currently using them, and that’s what we want to change. On props, we got the items prop from App.js, and the value of that will be that array, which will be want to render here,

But we don’t want to output the array as text or anything like that. Instead, we want to render one expense item per element in the array, and that’s straightforward to do. For this, first of all, we need single curly braces (opening and closing) because we want to execute a dynamic expression in our JSX code, and you learned that this is done with curly braces. Then, we can execute JavaScript expressions here.

Now, the expression that we want to execute here is that we reach out to my array of data, in this case, the array of expenses, and then for every element, we want to create a JSX element, i.e., <ExpenseItem />.

For this, we can access props.items, that’s our array of items. Now, we can use a built-in array method, which is built into standard JavaScript, and that’s the map method. You can learn more about this method on Google.

What this method does is that it creates a new array based on another array, and that basically transforms every element in that original array. So, in the above example, we have an array of numbers, and with the map, we multiply every number by two to get this new array. For applying this transformation, the map takes a function, which we pass as an argument, and that function is then executed for every item in the array on which we’re calling the map.

The result of the passed function is the element that will be added to the newly created array. That’s how this works, and this is a built-in method, as we said. We can utilize it here to transform our array of objects, which we have here. React can render these elements if you output an array of JSX elements, like a couple of Cards.

So if you had something like this, an array of JSX elements as part of your JSX code, React will render these elements side by side, and that’s what we utilize here to transform our array of objects into such an array of expense items that React renders. So map, as we just showed you, takes a function as an argument, and that function executes for every element in the array. It gets that element for which it’s currently executing as a parameter.

So, here, we get our expense, and then in the function body or the right side of the arrow, if we’re using the arrow function, we have to return the JSX element into which we want to map this expense. So, in this case, we want to map every expense in my Expenses array into an ExpenseItem JSX element. So, we want to transform the expense object to the special kind of object, to the JSX element. And then we can configure it.

Here, we added a title prop, but the title is now an expense.title, as shown above. So, this expense is automatically passed as a parameter to this function. That expense is used to extract the title, and we did the same for the amount with expense.amount, and of same for the date by setting the date prop to expense.date. Now we can get rid of the hard-coded ExpenseItems,

So, we’re only left with the map expression,

We transform our array to an array full of JSX items. Hence, if we save this,

So, all the items have been rendered successfully. Now, it’s happening dynamically, which means that it’s based on the actual array, which means that we can change that array, and such changes will be reflected in that list (Shown above). So, we will do that in the next article, but before, try it on your own.

Expenses.js:

import React, { useState } from "react";

import ExpenseItem from "./ExpenseItem";
import "./Expenses.css";
import Card from "../UI/Card";
import ExpensesFilter from "./ExpensesFilter";

const Expenses = (props) => {
  const [filteredYear, setFilteredYear] = useState("2020");

  const filterChangeHandler = (selectedYear) => {
    setFilteredYear(selectedYear);
  };

  return (
    <Card className="expenses">
      <ExpensesFilter
        selected={filteredYear}
        onChangeFilter={filterChangeHandler}
      />

      {props.items.map((expense) => (
        <ExpenseItem
          title={expense.title}
          amount={expense.amount}
          date={expense.date}
        />
      ))}
    </Card>
  );
};

export default Expenses;

In the next article, I am going to discuss Using Stateful Lists in React. In this article, I try to explain Rendering Lists of Data in React with Examples. I hope you enjoy this Rendering Lists of Data in React with Examples article.