Nearby lessons
11 of 43📋 ReactJS – List Rendering
📌 What is List Rendering?
What is List Rendering in React?
Lists are very useful when building the UI of any website. They are mainly used for displaying a collection of data like products, names, courses, etc.
In React, lists are usually rendered using the JavaScript
map() method, which is the preferred way to iterate
over arrays and generate JSX.
📌 Why Use Lists in React?
- Lists make it easy to render multiple elements dynamically
- Commonly used for displaying arrays of products, names, courses, etc.
- React works efficiently with lists when they use keys for each item
⚙️ JavaScript map() Array Method
map()creates a new array by calling a function on each elementmap()executes once for each element in the arraymap()does not execute for empty elementsmap()does not change the original array
🧮 Basic List Rendering Example
Here’s a simple example of rendering an array of students and numbers using map():
📌 Rendering Objects in a List
You can also render an array of objects using map():
📤 Passing Data Between Components
We can pass list data from one component to another using props:
⚠️ List Warning: Missing Keys
If you don’t add a key prop when rendering lists, React shows a warning:
Warning: Each child in an array or iterator should have a unique “key” prop.
Keys help React identify which items have changed, added, or removed. Without keys, React re-renders entire lists instead of individual items.
✅ List with Keys
Always add a unique key when rendering lists. Keys make React rendering more efficient: