Code Editor
Web Browser
Advanced JSX

.map in JSX

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:

const strings = ['Home', 'Shop', 'About Me']; const listItems = => <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! const 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.