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 = strings.map(string => <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>
Instructions
You can see that a .map()
call is partially set up.
On line 8, write an expression to complete the .map()
call. This expression should consist of an <li></li>
, containing the person
parameter. Feel free to use the first example as a guide.
On line 12, call ReactDOM.render()
.
For ReactDOM.render()
‘s first argument, write a <ul></ul>
. In between the <ul>
tags, use curly braces to inject the peopleLis
variable.
For ReactDOM.render()
‘s second argument, use document.getElementById('app')
.