Click here to navigate the course.

Drag the edges to resize the window.

In Projects, you can keep track of your progress as you go throught the tasks. Check each item as you complete it!

Code Editor
Web Browser
Learn

The array method .map comes up often in React. It's good to get in the habit of using it alongside JSX.

If you want to create a list of JSX elements, then .map is often your best bet. It can look odd at first:

var strings = ['Home', 'Shop', 'About Me']; var listItems = strings.map(function(string){ return <li>{string}</li>; }); <ul>{listItems}</ul>

In the above example, we start out with an array of strings. We call .map on this array of strings, and the .map call returns a new array of <li>s.

On the last line of the example, note that {listItems} will evaluate to an array, because it's the returned value of .map! JSX <li>s don't have to be in an array like this, but they can be.

// This is fine in JSX, not in an explicit array: <ul> <li>item 1</li> <li>item 2</li> <li>item 3</li> </ul> // This is also fine! var liArray = [ <li>item 1</li>, <li>item 2<li>, <li>item 3</li> ]; <ul>{liArray}</ul>
Report a Bug
If you see a bug or any other issue with this page, please report it here.