Lists in React

The lists are used to displaying data in an ordered manner and mainly used for displaying menus on a website. Just like in JavaScript, React Lists work as similar to. To create the list in a React we use the same concept as JavaScript as an array used for creating lists. E.g.

var numbers = [6,5,4,3,2]; 
  const updated = numbers.map((number)=>{ 
      return (number / 2); 
  }); 
  
  console.log(updated); 

The map() function is used to transfer the lists and for updating the elements we used cursor bracs for enclosing between <li>  </li> elements. At last, for new list we use <ul>  </ul> and render it to DOM. 

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
const name = ['Nitin', 'Subham', 'Sarthak', 'Muskaan', 'Yamini']; 
  
const team = name.map((name)=>{ 
    return <li>{name}</li>; 
}); 
  
ReactDOM.render( 
    <ul> 
        {team} 
    </ul>,  
    document.getElementById('root') 
);

Rendering List inside components

From the above points or example, we can say it directly rendered the list to the DOM. As in React, we know everything in the application depends upon individuals components for built-in. So, we have to ensure the render the list inside the component i.e. we pass a list to a component using props, and this component use for rendering the list to the DOM.

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function NameList(props) {  
  const name = props.name;  
  const team = name.map((name) =>  
    <li>{name}</li>  
  );  
  return (  
    <div>  
        <h2>Tutorial Link Writer Team</h2>  
              <ul>{name}</ul>  
    </div>  
  );  
}  
const name = ['Nitin', 'Subham', 'Sarthak', 'Muskaan', 'Yamini'];   
ReactDOM.render(  
  <NameList name={name} />,  
  document.getElementById('app')  
);  

You will see the output is in an unordered list due to no unique 'key'. Now there is an introduction of keys that give identity to elements in the list.

Keys in React

Keys are used to identifying when items or elements are changed, deleted, and updated form the list. It is an important part of the list as it helps to identify the component who wants to rendered apart from rendering the whole list every time.

Note that use string as a key which helps to uniquely identify the items. Second, we can use index also as a key to the list but there is a drawback also if the order of the item change in the future it will confuse the developer and cause the error. 

const name = [ 'Nitin', 'Subham', 'Sarthak', 'Muskaan', 'Yamini' ];   
    
const team = name.map((name, index)=>{   
    <li key={index}> {name} </li>;   
}); 

Using Keys with Component

Let take a scenario that you create another component for the list items and extract it from that component. For that, we have to assign the keys to the element, not to <li> elements. To avoid this mistake always keep in mind that anything you return from map() function we have to assign a key to it.

import React from 'react';   
import ReactDOM from 'react-dom';   
  
function ListItem(props) {  
  const item = props.item;  
  return (    
    <li>  
      {item}  
    </li>  
  );  
}  
function NameList(props) {  
  const name = props.name;  
  const listItems = name.map((strLists) =>  
    <ListItem item={strLists} />  
  );  
  return (  
    <div>  
        <h2> Key</h2>  
              <ol>{listItems}</ol>  
    </div>  
  );  
}  
const name = ['Nitin', 'Subham', 'Sarthak', 'Muskaan', 'Yamini'];   
ReactDOM.render(  
  <NameList name={name} />,  
  document.getElementById('app')  
);    

Uniqueness of keys

As we know keys are assigned to the elements of the array which also be unique but that does not mean it will globally unique. All elements have unique keys i.e. Two different arrays can have the same set of keys used for it.