React Lists | How to work with Lists in React JS

React Lists are used to display data in an organized format and are primarily used to display menus on web pages. You can create lists in React the same way you create lists in JavaScript. Let’s see how to convert a list to plain JavaScript.

Table of Contents

Why do we need React Lists?

Lists are an essential feature of the application. A list of tasks like a calendar app, a list of images like Instagram, a list of items to buy in a shopping cart, etc. are numerous use cases where lists are used to improve performance. Imagine an app with a large list of videos or images that appear as you scroll. This could limit the performance of the application. Since performance is a fundamental consideration, using lists would ensure that they are designed for optimal performance.

React Lists With Example

Use the map() function to iterate over a list. In the example below, the map() function takes an array of numbers and multiplies those values by 5. Assign the new array returned by map() to the variable multiplyNums and log it.

Example

var numbers = [2, 4, 6, 8, 10];   
const multiplyNums = numbers.map((number)=>{   
    return (number * 5);   
});   
console.log(multiplyNums);

The above JavaScript code will log this output on the console

Output

[10,20,30,40,50]

Now let’s see how to create a list in React. To do this, use the map() function to iterate through the list items and wrap them in braces {} for updates. Finally, assign the array elements to the listItems. Wrap this new list
elements and pass it to the DOM.

Example

import React from 'react';   
import ReactDOM from 'react-dom';   
  
const myList = ['Student1', 'Student2', 'Student3', 'Student4', 'Student5'];   
const listItems = myList.map((myList)=>{   
    return <li>{myList}</li>;   
});   
ReactDOM.render(   
    <ul> {listItems} </ul>,   
    document.getElementById('app')   
);   
export default App;

Rendering a list in React

In the React code above, we rendered the list directly to the DOM. But this is usually not a good way to render lists in React. We’ve already talked about using components and see how everything in React is built as individual components. Consider the example of a navigation menu. Obviously, navigation menu items are not hard-coded into any web page. This element is retrieved from the database and displayed as a list in the browser.

So from a component perspective, we can say that we support the list with a component and use that component to render the list into the DOM. The above code that rendered the list directly can now be updated to a component that takes an array as a prop and returns an unordered list.

import React from "react";
const people= [
  { firstName: "Saurabh", lastName: "verma" },
  { firstName: "Shreyansh", lastName: "Verma" },
  { firstName: "Yash", lastName: "Kapoor" }
];
const People= ({ firstName, lastName }) => (
  <div>
    {firstName} {lastName}
  </div>
);
export default function App() {
  return (
    <div>
      {people.map((p, i) => (
        <People {...p} key={i} />
      ))}
    </div>
  );
}