Lists and Keys in React:

Lists in React:

A List is a simple data structure that we often use in JavaScript to store and display some collective data. That data can be of similar type or even of dissimilar type as well.
Consider the code below

class First extends Component {
  render()  {
    const myNumbers = [ 1, 2, 3, 4, 5];
    return (
      <div>{myNumbers}</div>
    );
  }
  }
export default First;

Here in this code:

Look at the way the list is written.
The values of list are assigned to myNumbers.
The variable myNumbers is rendered finally.

List rendering with map() method:

In JavaScript, there is a method called map() to facilitate some advancement in how a list will be handled in the backend.
The basic syntax of map() method is as follows:

const chgNums = myNumbers.map((num) => <li>{num*num}</li> );

Here we can see that, map() is being called in relation with the original list. It takes an arrow function as argument where it renames the list and then lets the programmer perform whatever operation he wants over the items.

As a simple example we can see how map() method can change the valued of the list that was already created.
Consider the code below:

class First extends Component {
  render()  {
    const myNumbers = [ 1, 2, 3, 4, 5];
    const sqNums= myNumbers.map((num) => <li>{num*num}</li> );

    return (
      <div>{sqNums}</div>
    );
  }
  }
export default First;

Here in this code:

Look at the way map() method is written.
It first converts the name of list from myNumbers to num.
Then is lets the programmer double every item.
Finally all the doubled items are stored in the new list sqNums.

NOTE: We not only assign the return of map() method to a variable, we can call the map() method in the return statement of the component as well.

Displaying only few list items:
By appending the array index while rendering the list, we can have a control on exactly which items are to be rendered. Consider the code below:

return (
      <div>
        <h4>{myNumbers[0]}</h4>
        <h4>{myNumbers[4]}</h4>
      </div>
);

Here as we see, only the first and fifth items of the list will be rendered.

Displaying a complete data structure:
By creating a detailed list of many items, each as a complete data set, we can render it all in a very elegant way. Consider the code below:

class First extends Component {
  render()  {
    const staff = [
      {
        name: 'Shashi',
        designation: 'Faculty',
        qlf: 'B Level'
      },
      {
        name: 'Alok',
        designation: 'Accountant',
        qlf: 'M Com'
      },
      {
        name: 'Prashant',
        designation: 'Administrator',
        qlf: 'MBA'
      }
    ];
  const employee= staff.map((stf) => <div>My name is {stf.name}. I am a(n) {stf.designation}. My qualification is {stf.qlf}.</div> );
    return (
      <div>
        <p>{employee}</p>
      </div>
    );
  }
  }
export default First;

Here in this code:

Look at the way staff is defined. It has three items each as a set of 3 data elements.
There is a map() method called to provide control over the list items.
Look at the way each data element is accessed.
Finally the entire list is rendered with some additional information.

Sending a List as a prop:

In modern practices, UI designers do not write the JSX code of calling map() method in the same component that has defined the list. Instead, they use another component to call the map() method and pass the list as prop to that component. Consider the code below:

class First extends Component {
    render()  {
      const staff = [
        {
          name: 'Shashi',
          designation: 'Faculty',
          qlf: 'B Level'
        },
        {
          name: 'Alok',
          designation: 'Accountant',
          qlf: 'M Com'
        },
        {
          name: 'Prashant',
          designation: 'Administrator',
          qlf: 'MBA'
        }
      ];
    const employee= staff.map((stf) => <Second val={member}/>);
      return (
        <div>
          <p>{employee}</p>
        </div>
      );
    }
    }
  export default First;

This is how the component having the list defined will look alike. Now, consider the code of the component that calls the map() method by getting the list as prop.

function Second ({member}) {
      return (
        <div>My name is {member.name}. I am a(n) {member.designation}. My qualification is {member.qlf}.</div>
      );
}
export default Second;

Keys in React:

Keys are important to be added as an attribute while calling the component that has called map() method. This adds uniqueness to every list item that is rendered. Keys are added in the following way:

class First extends Component {
  render()  {
    const staff = [
      {
        id: 12,
   name: 'Shashi',
        designation: 'Faculty',
        qlf: 'B Level'
      },
      {
        id: 13,
   	   name: 'Alok',
        designation: 'Accountant',
        qlf: 'M Com'
      },
      {
        id: 14,
   	   name: 'Prashant',
        designation: 'Administrator',
        qlf: 'MBA'
      }
    ];
  const employee= staff.map((stf) => <Second key={stf.id} val={member}/>);
    return (
      <div>
        <p>{employee}</p>
      </div>
    );
  }
  }
export default First;

Here in this code:

Look how another data element id is defined in the list.
Key is given as an attribute to the component Second while being called.
The value of key is nothing but the id that eventually makes the list items unique.
The component Second has nothing to do with this change.

Keys are important when there are frequent updates in the list. Every time there is a update in the list, React compares the old list with the new one. This comparison is done item by item. Keys in this comparison establish the uniqueness of the record.