Iterating through Lists

It is often necessary to fetch a List of Objects like either List of Employees or List of Products or List of Posts from the Data Store and display them in our Application. In this article, we will understand how to deal with List of Objects in React.

Lets go ahead and create Array of Employee Objects.

const employees = [

  {Id:101,Name:'Abhinav',Location:'Bangalore',Salary:12345},

  {Id:102,Name:'Abhishek',Location:'Chennai',Salary:23456},

  {Id:103,Name:'Ajay',Location:'Bangalore',Salary:34567}

];

 We have to create a Component which will display the employee details by reading from this Array and In this example, we will create this as a function Component. Lets create a function and name it as Employees. This function component will accept the list of employees as a Parameter.

function Employees(props) {

}

As we know that to a Component, we can pass data through properties and assuming that array of employees will be passed to this Component through a Property name employeeList, lets access this from the function parameter.

const list = props.employeeList;

This list has the employees data. We have to navigate through this list, read the data from each object and display the details. we loop through the list using the JavaScript map() function and assign the output of this function to a variable named listElements.

const listElements = list.map((emp) =>

  );

We will create another function component to which we will pass each Employee Object, and this component returns a div container in which we will display the Employee Details by reading from the function Parameter.

function Employee(props) {
  return <div style={{border:"3px solid red"}}>
  </div>;

}

Lets apply an inline style to this div and set the border. With in this div, we will display the Employee Details like ID, Name, Location and Salary by reading from the property Named as data through which employee information is passed to this component.

      <p>Employee ID : <b>{props.data.Id}</b></p>

    <p>Employee Name : <b>{props.data.Name}</b></p>

    <p>Employee Location : <b>{props.data.Location}</b></p>

    <p>Employee Salary : <b>{props.data.Salary}</b></p>

Lets call this Employee Component with in the map method of  Employees Component and to this Employee component we will pass the Employee Details through a Property called as data.

It is important to pass the Key to each Element with in this map method.  Keys help React identify which items have changed, are added, or are removed. The best way to pick a key is to use a string that uniquely identifies a list item among its siblings. Most often we would use IDs from our data as key.

const listElements = list.map((emp) =>
    <Employee key={emp.Id}  data={emp} />
  );

Lets return the contents of this listElements.

return (
    <div>
      {listElements}
    </div>
  );

Lets call this Employee Component and render it to our root Container.

Save these changes, lets navigate to the browser and we can see that Employee Details are being displayed.

For Video Reference