Let us apply these concepts to create a component that displays expense items in a table format.

Step 1: Project Setup

Open your expense-manager application in your editor.

Create the following files inside src/components:

ExpenseEntryItemList.css

ExpenseEntryItemList.js

Step 2: Import React and CSS

 

import React from 'react'; import './ExpenseEntryItemList.css';

Step 3: Create the Component Class

 

class ExpenseEntryItemList extends React.Component {   constructor(props) {      super(props);   }   render() {   } }

Step 4: Generate Table Rows Using map()

 

render() {   const lists = this.props.items.map((item) =>               {item.name}         {item.amount}         {new Date(item.spendDate).toDateString()}         {item.category}         ); }

Note:
Each item must have a unique key so React can efficiently track changes in the list.

Step 5: Render the Table

 

return (  

                                                                                          {lists}        

Item	Amount	Date	Category

);

Step 6: Export the Component

 

export default ExpenseEntryItemList;

Complete Component Code

 

import React from 'react'; import './ExpenseEntryItemList.css'; class ExpenseEntryItemList extends React.Component {   render() {      const lists = this.props.items.map((item) =>                    {item.name}            {item.amount}            {new Date(item.spendDate).toDateString()}            {item.category}              );      return (        

                                                                                                                                                      {lists}                    

Item	Amount	Date	Category

     );   } } export default ExpenseEntryItemList;

Step 7: Update index.js

Import the Component

 

import ExpenseEntryItemList from './components/ExpenseEntryItemList';

Create Expense Data

 

const items = [   { id: 1, name: "Pizza", amount: 80, spendDate: "2025-10-10", category: "Food" },   { id: 2, name: "Grape Juice", amount: 30, spendDate: "2025-10-12", category: "Food" },   { id: 3, name: "Cinema", amount: 210, spendDate: "2025-10-16", category: "Entertainment" },   { id: 4, name: "Java Programming book", amount: 242, spendDate: "2025-10-15", category: "Academic" },   { id: 5, name: "Mango Juice", amount: 35, spendDate: "2025-10-16", category: "Food" },   { id: 6, name: "Dress", amount: 2000, spendDate: "2025-10-25", category: "Cloth" },   { id: 7, name: "Tour", amount: 2555, spendDate: "2025-10-29", category: "Entertainment" },   { id: 8, name: "Meals", amount: 300, spendDate: "2025-10-30", category: "Food" },   { id: 9, name: "Mobile", amount: 3500, spendDate: "2025-11-02", category: "Gadgets" },   { id: 10, name: "Exam Fees", amount: 1245, spendDate: "2025-11-04", category: "Academic" } ];

Render the Component

 

import React from 'react'; import { createRoot } from 'react-dom/client'; import ExpenseEntryItemList from './components/ExpenseEntryItemList'; const container = document.getElementById('root'); const root = createRoot(container); root.render();

Styling (ExpenseEntryItemList.css)

 

html {  font-family: sans-serif; } table {   border-collapse: collapse;   border: 2px solid rgb(200,200,200);   letter-spacing: 1px;   font-size: 0.8rem; } td, th {   border: 1px solid rgb(190,190,190);   padding: 10px 20px;   text-align: left; } th {   background-color: rgb(235,235,235); } tr:nth-child(even) td {   background-color: rgb(250,250,250); } tr:nth-child(odd) td {   background-color: rgb(245,245,245); }

Run the Application

 

npm start

Open the browser at:

 

http://localhost:3000