Rendering Lists with the map() Function
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.
// 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
React Lists
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 React, rendering lists efficiently is critical for maintaining performance and ensuring a smooth user experience. React provides powerful tools to handle lists, allowing developers to create dynamic and responsive applications.
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.
Table of Content
- Steps to Create and Traverse React JS Lists
- Rendering lists inside Components
- Key in React List