ReactJS | Component Collection

Hello folks! welcome back to a new section of our tutorial on ReactJS. In this section of our tutorial on ReactJS, we will be studying about ReactJS Component Collection.

In modern application, developers run into a lot of situations, where list of items (orders, invoices, etc.,) has to be rendered in tabular or gallery format. React gives clear, intuitive and easy method to create list based user interface. React uses two existing features to accomplish this feature.

• JavaScript's built-in map method.

• React expression in jsx.

The map method accepts a collection and a mapping function. The map function will be applied to each and every item that we have in the collection and the results are used to generate a new list.

For example, declare a JavaScript array with 5 random numbers as shown below -

qlet list = [10, 30, 45, 12, 24]

Next, apply an anonymous function, which doubles its output as shown below -

result = list.map((input) => input * 2);

Then, the resulting list is -

[20, 60, 90, 24, 48]

To refresh the React expression, let's create a new variable and assign a React element.

var hello = <h1>Hello!</h1> 
var final = <div>{helloElement}</div>

Now, the React expression, hello is going to get merged with final and generate.

<div><h1>Hello!</h1></div>

READ: ReactJS | Use Component

Let us now apply the concept to a create a component to show a collection of expense entry items in a tabular format.

Open our expense-manager application in your favorite editor.

Next, create a file, ExpenseEntryItemList.css in src/component folder to include style for the component.

Now, create a file, ExpenseEntryItemList.js in src/components folder to create component ExpenseEntryItemList.

Next, import React library and stylesheet.

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

Next, create ExpenseEntryItemList class and call constructor function.

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

Next, create a render function.

render() { 
}

Next, make use of map method to generate a collection of HTML table rows, each row representing a single expense entry item in the list.

render() {
   const lists = this.props.items.map( (item) => 
      <tr key={item.id}>
         <td>{item.name}</td>
         <td>{item.amount}</td>
         <td>{new Date(item.spendDate).toDateString()}</td>
         <td>{item.category}</td>
      </tr>
   );
}

Here, key identities each row and it has to be unique among the list.

Next, in the render() method, create a HTML table and include the lists expression in the row section.

return (
   <table>
      <thead>
         <tr>
            <th>Item</th>
            <th>Amount</th>
            <th>Date</th>
            <th>Category</th>
         </tr>
      </thead>
      <tbody>
         {lists}
      </tbody>
   </table>
);

READ: ReactJS | Nested Components

Finally, export the component.

export default ExpenseEntryItemList;

We've successfully created the component to render the expense item into HTML table.

The complete code is as follows -

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

class ExpenseEntryItemList extends React.Component {
   constructor(props) {
      super(props);
   }
   render() {
      const lists = this.props.items.map( (item) => 
         <tr key={item.id}>
            <td>{item.name}</td>
            <td>{item.amount}</td>
            <td>{new Date(item.spendDate).toDateString()}</td>
            <td>{item.category}</td>
         </tr>
      );
      return (
         <table>
            <thead>
               <tr>
                  <th>Item</th>
                  <th>Amount</th>
                  <th>Date</th>
                  <th>Category</th>
               </tr>
            </thead>
            <tbody>
               {lists}
            </tbody>
         </table>
      );
   }
}
export default ExpenseEntryItemList;

Next, open up index.js and import our newly created ExpenseEntryItemList component.

import ExpenseEntryItemList from './components/ExpenseEntryItemList'

Next, declare a list (of expense entry item) and populate it with some random values in index.js file.

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

Next, use ExpenseEntryItemList component by passing the items via items attributes.

ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItemList items={items} />
   </React.StrictMode>,
   document.getElementById('root')
);

The complete code of index.js is as follows -

import React from 'react';
import ReactDOM from 'react-dom';
import ExpenseEntryItemList from './components/ExpenseEntryItemList'

const items = [
   { id: 1, name: "Pizza", amount: 80, spendDate: "2020-10-10", category: "Food" },
   { id: 1, name: "Grape Juice", amount: 30, spendDate: "2020-10-12", category: "Food" },
   { id: 1, name: "Cinema", amount: 210, spendDate: "2020-10-16", category: "Entertainment" },
   { id: 1, name: "Java Programming book", amount: 242, spendDate: "2020-10-15", category: "Academic" },
   { id: 1, name: "Mango Juice", amount: 35, spendDate: "2020-10-16", category: "Food" },
   { id: 1, name: "Dress", amount: 2000, spendDate: "2020-10-25", category: "Cloth" },
   { id: 1, name: "Tour", amount: 2555, spendDate: "2020-10-29", category: "Entertainment" },
   { id: 1, name: "Meals", amount: 300, spendDate: "2020-10-30", category: "Food" },
   { id: 1, name: "Mobile", amount: 3500, spendDate: "2020-11-02", category: "Gadgets" },
   { id: 1, name: "Exam Fees", amount: 1245, spendDate: "2020-11-04", category: "Academic" }
]
ReactDOM.render(
   <React.StrictMode>
      <ExpenseEntryItem item={item} />
   </React.StrictMode>,
   document.getElementById('root')
);

Next, open up ExpressEntryItemList.css and add style for the table.

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;
}
th {
   background-color: rgb(235,235,235);
}
td, th {
   text-align: left;
}
tr:nth-child(even) td {
   background-color: rgb(250,250,250);
}
tr:nth-child(odd) td {
   background-color: rgb(245,245,245);
}
caption {
   padding: 10px;
}

Next, serve the application making use of npm command.

npm start

Next, open the web browser and then enter http://localhost:3000 in the address bar and press enter.

Item	Amount	Date	Category
Pizza	80	Sat Oct 10 2020	Food
Grape Juice	30	Man Oct 12 2020	Food
Cinema	210	Fri Oct 16 2020	Entertainment
Java Programming book	242	Thu Oct 15 2020	Academic
Mango Juice	35	Fri Oct 16 2020	Food
Dress	2000	Sun Oct 25 2020	Cloth
Tour	2555	Thu Oct 29 2020	Entertainment
Meals	300	Fri Oct 30 2020	Food
Mobile	3500	Mon Nov 02 2020	Gadgets
Exam Fees	1245	Wed Nov 04 2020	Academic

READ: ReactJS | Styling

Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial, we will be studying about ReactJS Event Management.

Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.

Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.

Thanks for reading and bye for now.