Transforming Data with Array.map()

Snippet

Transforming Data with Array.map()

The .map() method creates a new array by calling a function for every element in the original array. In Next.js, it is the standard way to render lists of items.

snippet.js
javascript
const frameworkList = ['Next.js', 'React', 'TypeScript'];
const items = frameworkList.map((item) => <li key={item}>{item}</li>);

nextjs

Breakdown

frameworkList.map((item) => ...)

Iterates through each framework string to create a new JSX element.

key={item}

A unique identifier required by React to efficiently update lists.

Previous snippet Next snippet

More Beginner JavaScript exercises →

From your library

Transforming Data with Array.map()

Related