Q1. How is the map function used in React?
map is used to iterate over an array and return a new array of JSX elements. For example: data.map(item => {item.name} ). It's the most common way to render lists dynamically.
Q2. Where should you place the key prop when using map?
The key prop should be placed on the outermost element returned by map, typically the component or element that represents each list item. For example, in ... or .
Q3. Can you use other array methods like filter or reduce for rendering?
Yes, you can use filter to remove items before mapping, or reduce to build complex structures. However, map is the most direct. For example, data.filter(item => item.completed).map(...).
Q4. What happens if you forget to return from map?
If you forget to return, map returns undefined for each item, resulting in a list of undefined, which may cause errors or blank output. Ensure you have a return statement or use concise arrow functions without curly braces.
Q5. How do you render nested lists using map?
You can nest map calls. For example, render categories, and for each category, map its items. Ensure each level has its own unique key. This creates hierarchical structures.