What Are ReactJS Lists? Explained in Simple Terms

Programmers use lists in React when they are developing the UI of a website. They are used to display different menus on a website. For instance, the navbar menu. 

JavaScript users know that they can use arrays for creating lists. Similarly, you can create lists in React.

React uses the map() function for traversing the lists. Let’s consider an example where the map() function takes an array of numbers and multiply their values with another. You can then assign the new array returned by map() to the variable multiplyNums and log it.

React components are the building blocks that make any React app. You take any React app and it will have many components. You can consider it as a JavaScript class or function that accepts inputs i.e. properties(props) and returns a React element that describes how a section of the UI (User Interface) should appear.

Until now we have seen how to render lists directly to the DOM. But this is not a suggested practice in React. 

Since everything is built as individual components in React, it is important to learn how you can render lists inside components. Let’s see an example.