We now have a youtube channel. Subscribe

ReactJS | Component Collection

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>


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>
);


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.

ItemAmountDateCategory
Pizza80Sat Oct 10 2020Food
Grape Juice30Man Oct 12 2020Food
Cinema210Fri Oct 16 2020Entertainment
Java Programming book242Thu Oct 15 2020Academic
Mango Juice35Fri Oct 16 2020Food
Dress2000Sun Oct 25 2020Cloth
Tour2555Thu Oct 29 2020Entertainment
Meals300Fri Oct 30 2020Food
Mobile3500Mon Nov 02 2020Gadgets
Exam Fees1245Wed Nov 04 2020Academic


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.

Post a Comment

Hello dear readers! Please kindly try your best to make sure your comments comply with our comment policy guidelines. You can visit our comment policy page to view these guidelines which are clearly stated. Thank you.
© 2022.WebDesignTutorialz. All rights reserved. Developed by Jago Desain