FAQ: Advanced JSX - .map in JSX

[wiki-bot]

This community-built FAQ covers the “.map in JSX” exercise from the lesson “Advanced JSX”.

Paths and Courses
This exercise can be found in the following Codecademy content:

Web Development

Learn ReactJS: Part I

FAQs on the exercise .map in JSX

• Can I use .forEach() to create a list of JSX elements?

Join the Discussion. Help a fellow learner on their journey.

Ask or answer a question about this exercise by clicking reply () below!

Agree with a comment or answer? Like () to up-vote the contribution!

Need broader help or resources? Head here.

Looking for motivation to keep learning? Join our wider discussions.

Learn more about how to use this guide.

Found a bug? Report it!

Have a question about your account or billing? Reach out to our customer support team!

None of the above? Find out where to ask other questions here!

[williamsohworuka]

why not put the list tags in the array in the first place

[_31337]

genius
const peopleLis

[system4950519136]

I’m not sure why but my list didn’t get rendered in the browser window in this exercise, is there a reason?
My below code did pass:

const people = ['Rowe', 'Prevost', 'Gare'];
const peopleLis = people.map(person =>
  // expression goes here:
  return <li>{person}</li>;
);
// ReactDOM.render goes here:
ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'));

[cyber_rebel111]

You must delete return keyword in peopleLis.

[mrktrpny]

I’m not getting my head around what’s happening here…

import React from 'react';
import ReactDOM from 'react-dom';

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

const peopleLis = people.map(person =>
  <li>{person}</li>
);

ReactDOM.render(<ul>{peopleLis}</ul>, document.getElementById('app'));

.map(), as I understand it, returns a new array. So, peopleLis is an array of objects, thus:

[{ li, {}, 'Rowe' }, { li, {}, 'Prevost' }, { li, {}, 'Gare' }]

Right so far?! How, then, does this become an unordered list, formatted correctly in the browser? In the .render() method, aren’t we placing an array between the <ul> tags?

[mrktrpny]

Replying to my own post! Just thinking about this… So, we’re passing an array of children, and React simply renders the contents of the array, i.e. the list items? Is that what’s happening? Thinking of the {peopleLis} in the render method as simply an array of children makes more sense. I’d still appreciate any clarification with this — thanks!

[jacktermorgan]

Why is it `const peopleLis = people.map(person =>

{**person**}

`

and not `const peopleLis = people.map(people =>

{**people**}

`?

[awelie_go]

The first parameter of a callback function such as .map() is always the current element being processed in the array that .map() is called on, no matter how you name it. But usually you would want to name it as something that refers to one unit of the array (a list of units) for clarity and readability reasons. In this case, the word ‘person’ seems a good fit as we could say a person is a unit of people. But the suggestion you made (using ‘people’ instead of ‘person’) would also yield the same result, as would the word potato or pretzel. Only it would make less sense to use potato or pretzel in the context.

[awelie_go]

.map() , as I understand it, returns a new array. So, peopleLis is an array of objects, thus:

[{ li, {}, 'Rowe' }, { li, {}, 'Prevost' }, { li, {}, 'Gare' }]

Right so far?! How, then, does this become an unordered list, formatted correctly in the browser?

I’m new to JSX, but If I log the listItems from the lesson’s example in the browser’s console, I get this:

I used back-ticks in the .map()'s body because the console would otherwise flag it as a Syntax Error (not being able to read JSX in the browser’s console I guess). After you abstract the back-ticks away, I think this would still be the format of the returned value of .map() in JSX. So indeed an array of list tags, correctly formatted.

[rufusbiggs]

Whats the ‘i’ for in the map() function “people.map((person,i)”?

[mtrtmk]

If we are iterating over an array and the callback function provided to the map has a single parameter, then the element we are iterating over will be provided as the argument.

If the callback function we provide to map has two parameters, then the element we are iterating over will be provided as the argument for the first parameter, while the index will be provided as the argument to the second parameter.

For Example,

Our callback function can also have a third parameter in which case the following arguments will be provided by the map method:

If the index is not necessary, then

const peopleList = people.map(person =>

is sufficient. If for some purpose, we do need the index of the element we are iterating over, then we can specify a second parameter,

const peopleList = people.map((person, i) =>

and the map method will automatically provide the index as the argument for the second parameter.

[text9886054585]

This is such a helpful answer and is not explained in an of the lessons. It’s important to understand this but its omision from the lessons has been very confusing.

[ctgriffi]

A very good question that should’ve been explained better within the lesson… although it is mentioned in the lesson that follows. (Like mtrtmk has thoroughly described, the second parameter, the lowercase i, contains the index value of each iteration.)

Thank you, mtrtmk!