Rendering Lists
-
This lesson teaches how to render lists in React by converting arrays into UI elements using the map() function.
Rendering Lists
Rendering lists means displaying multiple items dynamically.
Common in:
Todo lists
Product lists
User lists
Rendering Arrays in JSX
React uses the map() method to render arrays.
Example:
const fruits = ["Apple", "Banana", "Mango"];
<ul>
{fruits.map((fruit) => (
<li>{fruit}</li>
))}
</ul>
👉 map() transforms data into JSX.
Keys in React
Keys are special attributes used to uniquely identify list items.
Example:
{fruits.map((fruit, index) => (
<li key={index}>{fruit}</li>
))}
Keys help React track changes.
Why Keys Are Important
Keys help React:
Identify which items changed
Improve performance
Avoid unnecessary re-renders
Without Keys:
UI bugs
Incorrect updates
Poor performance
Best Practice:
Use unique IDs instead of index.
<li key={item.id}>{item.name}</li>Final Summary
Conditional rendering controls UI visibility
Use if, ternary, or && operators
Lists are rendered using map()
Keys are required for list items
Keys improve performance and accuracy