ReactJS – Component Collection


ReactJS – Component Collection



”;


In modern application, developer encounters a lot of situations, where list of item (e.g. todos, orders, invoices, etc.,) has to be rendered in tabular format or gallery format. React provides clear, intuitive and easy technique 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.

Map Method

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

For instance, declare a JavaScript array with 5 random numbers as shown below −


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

Now, apply an anonymous function, which double its input 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 us create a new variable and assign a React element.


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

Now, the React expression, hello will get merged with final and generate,


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

Example

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

Step 1 − Open our expense-manager application in your favorite editor.

Create a file ExpenseEntryItemList.css in src/components folder to include styles for the component.

Create another file, ExpenseEntryItemList.js in src/components folder to create ExpenseEntryItemList component

Step 2 − Import React library and the stylesheet.


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

Step 3 − Create ExpenseEntryItemList class and call constructor function.


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

Create a render() function.


render() { 
}

Step 4 − Use the map method to generate a collection of HTML table rows each 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 identifies each row and it has to be unique among the list.

Step 5 − Next, in the render() method, create a HTML table and include the lists expression in the rows 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;

Now, we have successfully created the component to render the expense items 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;

index.js:

Open 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" }
]

Use ExpenseEntryItemList component by passing the items through 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'')
);

ExpenseEntryItemList.css:

Open ExpenseEntryItemList.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;
}

Start the application using npm command.


npm start

Output

Finally, open the browser and 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

Advertisements

”;

Leave a Reply

Your email address will not be published. Required fields are marked *