How to Use Reactjs List In a Website

ReactJS | Lists

Developing UI of any website lists is very useful and mainly used for displaying menus on a website, for example, the navbar menu. We can use arrays for creating lists in regular javascript and also create lists in React in a similar manner as we do in regular JavaScript. 

Let’s first see how we can update and traverse any list in regular JavaScript. We can use the map() function in JavaScript for traversing the lists.

Javascript code illustrates using map() function to traverse lists:

<script type="text/javascript"> 
    var numbers = [1,2,3,4]; 
  
    const updatedNums = numbers.map((number)=>{ 
        return (number + 2); 
    }); 
  
    console.log(updatedNums); 
</script> 
 

The above code will log the below output to the console:

[3, 4, 5, 6]

Now create a list of elements in React. We will render the list numbers in the above code as an unordered list element in the browser rather than simply logging it to the console. To do this, we will traverse the list using the javascript map() function and updates elements to be enclosed between <li> </li> elements. Finally we will wrap this new list within <ul> </ul> elements and render it to the DOM.

Code illustrate this:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
const numbers = [1,2,3,4]; 
  
const updatedNums = numbers.map((number)=>{ 
    return <li>{number}</li>; 
}); 
  
ReactDOM.render( 
    <ul> 
        {updatedNums} 
    </ul>,  
    document.getElementById('root') 
);

Output:
.1
.2
.3
.4

Here Rendering lists inside Components

In React code we had directly rendered the list to the DOM. But this, not a good practice to render lists in React. We already have talked about the uses of Components and had seen that everything in React is built as individual components. Consider the example of a Navigation Menu. It is obvious that on any website the items in a navigation menu are not hardcoded. Lists displayed in the browser after this item are fetched from the database . So from the component’s point of view, we can say that we will pass a list to a component using props and then use this component to render the list to the DOM. We can update the above code in which we have directly rendered the list to now a component that will accept an array as props and returns an unordered list.

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
// Component that will return an 
// unordered list 
function Navmenu(props) 
{ 
    const list = props.menuitems; 
  
    const updatedList = list.map((listItems)=>{ 
        return <li>{listItems}</li>; 
    }); 
  
    return( 
        <ul>{updatedList}</ul> 
    ); 
} 
  
const menuItems = [1,2,3,4,5]; 
  
ReactDOM.render( 
    <Navmenu menuitems = {menuItems} />,  
    document.getElementById('root') 
);

Output:
.1
.2
.3
.4

But with this code, a warning message is logged to the console.
"Warning: Each child in an array have a unique "key" prop"

The above warning message says that each of the list items in our unordered list should have a unique key. A “key” is a special string attribute. When creating lists of elements in React you need to include Key. Now, we will assign a string key to each of our list items in the above code.

The updated code with keys:

import React from 'react'; 
import ReactDOM from 'react-dom'; 
  
// Component that will return an 
// unordered list 
function Navmenu(props) 
{ 
    const list = props.menuitems; 
  
    const updatedList = list.map((listItems)=>{ 
        return( 
                <li key={listItems.toString()}> 
                    {listItems} 
                </li> 
            );  
    }); 
  
    return( 
        <ul>{updatedList}</ul> 
    ); 
} 
  
const menuItems = [1,2,3,4,5]; 
  
ReactDOM.render( 
    <Navmenu menuitems = {menuItems} />,  
    document.getElementById('root') 
); 

We get the same output as that of the previous code but without any warning.  To identify which items in the list are changed,  updated or deleted we used Keys in React. We can say that keys are used to give an identity to the elements in the lists. 

Thanks,