What is list rendering?

Learn how to map an array into JSX.

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.

Complete the skeleton. Write a NameList component that turns the names array into <li> items inside a <ul> using .map(). Export it.

Show example solution

function NameList() {
  const names = ["Alex", "Sam", "Robin"];
  return <ul>{names.map(n => <li>{n}</li>)}</ul>;
}

export default NameList;

What is list rendering: fill in the missing part

<ul>{names.map(name => <li>____</li>)}</ul>

Show answer

<ul>{names.map(name => <li>name</li>)}</ul>