What is list rendering?
- React course
- Beginner
- Lesson 27/84
- 4 min
Learn how to map an array into JSX.
What is list rendering?
To draw an array on screen in React you use .map(). map turns each item of the array into a JSX node and gives you back a new array.
You embed the resulting node list inside curly braces: {names.map(...)}. React draws each node in order.
This saves you from writing dozens of <li> tags by hand; when the data changes, the list updates itself.
JSX from arrays
Inside map you write an arrow function. An arrow function is defined with the => arrow; its right side acts as the return value.
Example: {[1,2,3].map(n => <li>{n}</li>)}. Each number becomes an <li>. The braces embed {n}.
You will see the details of arrow functions later; for now we use the single-line form.
Practice NameList component
Complete the skeleton. Write a NameList component that turns the names array into <li> items inside a <ul> using .map(). Export it.
Starter code
// Define NameList hereSample solution
function NameList() {
const names = ["Alex", "Sam", "Robin"];
return <ul>{names.map(n => <li>{n}</li>)}</ul>;
}
export default NameList;Questions and answers
Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.
1 What does map return?
map is a pure function; no side effects.- It mutates the original array
- It returns a new array Correct answer
- It returns a single value
- It returns nothing
Explanation: map does not mutate; it returns a new array.
2 What is list rendering: fill in the missing part
<ul>{names.map(name => <li>____</li>)}</ul><ul>{names.map(name => <li>name</li>)}</ul>Explanation: The map parameter is name; write {name} inside li.
3 What is list rendering: match the terms
| Term | Meaning |
|---|---|
map |
Transforms an array |
filter |
Keeps some items |
forEach |
Returns nothing |
key |
Unique identity |