ReactJS Tutorial

What Are ReactJS Lists? Explained in Simple Terms

Table of Contents

  • What are Lists in ReactJS?
  • What are Components in ReactJS?
  • Test your knowledge with a quick quiz!
  • Rendering Lists Inside React components

What are Lists in ReactJS?

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.

 

What are Components in ReactJS?

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.

Test your knowledge with a quick quiz!

What are the building blocks that make any React app?

Select the correct answer

Rendering Lists Inside React components

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.

Did you find this article helpful?