.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 = 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>

</ul>

// This is also fine!

const liArray = [

<li>item 1</li>,

<li>item 2</li>,

];

<ul>{liArray}</ul>

Instructions

1.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.

2.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').

app.js

import React from 'react';

import ReactDOM from 'react-dom';

const people = ['Rowe', 'Prevost', 'Gare'];

const peopleLis = people.map(person =>

// expression goes here:

);

// ReactDOM.render goes here:

Page updated

Report abuse