Lists are very useful when it comes to developing UI of any website. Lists are mainly used for displaying menus on a website, for example, the navbar menu. In regular javascript, we can use arrays for creating lists. We can create lists in React in a similar manner as we do in regular JavaScript. We will see how to do this in detail further in this article.

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

To get in-Depth knowledge on Reactjs you can enroll for a live demo on Reactjs Online Training

Below javascript code illustrate using map() function to traverse lists:

<script type="text/javascript"> 
var numbers = [1,2,3,4,5];
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, 7]

Let us 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.

Take your career to new heights of success with Reactjs Training

Below code illustrate this:

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

The above code will render an unordered list as shown in below output:

Image for post
Image for post

Rendering lists inside Components

In the above code in React, we had directly rendered the list to the DOM. But usually 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. These items are fetched from the database and then displayed as lists in the browser. 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:

Image for post
Image for post

You can see in the above output that the unordered list is successfully rendered to the browser but a warning message is logged to the console.

Warning: Each child in an array or iterator
should 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 you need to include when creating lists of elements in React. We will discuss about keys in detail in further articles. For now, let's just assign a string key to each of our list items in the above code.

Below is 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')
);

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store