An animated guide to Array Map

Last updated January 14, 2022 by Jacob Paris

This is an example of an animated guide to Array Map.

JS

Map a string to an object

Step 0/3

const names = ['Alice','Betty','Carol']
names.map(function (name) {
return {
name: name
}
}
return []

This example shows a map callback that makes each item lowercase

JS

Map a string to lowercase

Step 0/3

const names = ['Alice','Betty','Carol']
names.map(function (name) {
return name.
toLowerCase()
}
return []

Probably the most common use of array map in React is to turn data into elements on the screen

This example shows a list of strings being mapped into HTML list items

JS

Map a string to a list item tag

Step 0/3

const names = ['Alice','Betty','Carol']
<ul>
{names.map(name => (
<li> { name
} </li>
))}
</ul>
<ul></ul>

The second argument to a map callback is the index of the item in the array

This example shows a list of strings being mapped into a numbered list

JS

Map a string to an indexed list item

Step 0/3

const names = ['Alice','Betty','Carol']
<ul>
{names.map((name, i) => (
<li> {i}: { name
} </li>
))}
</ul>
<ul></ul>