Open In App

ReactJS Lists

Improve
Improve
Like Article
Like
Save
Share
Report

Lists are very useful when it comes to developing the UI of any website. React 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. 

In this tutorial, we will learn about React lists with examples. We will cover React list fundamentals like creating lists, traversing lists, and rendering lists in React with examples. Let’s start by learning how to create and traverse React lists.

Steps to Create and Traverse React JS Lists

We can create lists in React just like we do in regular JavaScript i.e. by storing the list in an array. To traverse a list we will use the map() function. To create a React list, follow these given steps:

Step 1: Create a list of elements in React in the form of an array and store it in a variable. We will render this list as an unordered list element in the browser.

Step 2: We will then traverse the list using the JavaScript map() function and update elements to be enclosed between <li> </li> elements. 

Step 3: Finally we will wrap this new list within <ul> </ul> elements and render it to the DOM.

React List Examples

Example: This example implements a simple list in ReactJS.

Javascript
// Filename -  index.js 

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

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

ReactJS lists

ReactJS Lists

Rendering lists inside Components

In the above code in React, we directly rendered the list to the DOM. But usually, this is not a good practice to render lists in React. We already have talked about the uses of Components and have seen that everything in React is built as individual components.

Consider the example of a Navigation Menu. It is obvious that in any website the items in a navigation menu are not hard coded. This item is fetched from the database and then displayed as a list 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 return an unordered list. 

Javascript
// Filename - index.js

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: 

ReactJS list

ReactJS Lists

The above code will give a warning in the console of the browser like:

React list Warning

ReactJS Lists Warning

The above warning message says that each of the list items in our unordered list should have a unique key.  

Key in React List

A “key” is a special string attribute you need to include when creating lists of elements in React. 

Keys allow React to keep track of list elements. This helps when we remove or add an element, only that element is re-rendered instead of the entire list.

Example: This is the updated code for React List with keys:

Javascript
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')
);

Output: In the below-shown output you can see the rendered output is the same but this time without any warning in the console.

ReactJS Lists with Keys

Keys are used in React to identify which items in the list are changed, updated, or deleted. We will learn about keys in more detail in our ReactJS keys article.

Summing Up

In summary, React lists are arrays with values. To render the elements of an array we iterate over each element and create a JSX element for each item. We use keys to label list elements, and when the changes are made to the list we don’t need to re-render the entire list.

This tutorial explains React lists and uses JavaScript codes to show examples of all different concepts. After completing this tutorial, you will be able to use lists in your React project. 



Last Updated : 15 Mar, 2024
Like Article
Save Article
Previous
Next
Share your thoughts in the comments
Similar Reads