Mapping Arrays to JSX Elements in React

Learn how to map arrays to JSX elements in React. This is a vital skill for dynamic rendering of lists or grids in your React applications.

( tag: react, tag: jsx, tag: arrays )

In React, a common requirement is to render a list of items. This can be achieved by mapping arrays to JSX elements.

Consider an array of strings:

const fruits = ['Apple', 'Banana', 'Cherry'];

To render these as a list, we use the JavaScript map function. Each item in the array becomes a JSX element:

{fruits.map((fruit) => 
  <li key={fruit}>{fruit}</li>
)}

Here, each fruit in the fruits array is passed to an arrow function, which returns a JSX <li> element. The key prop is essential when creating lists in React because it helps React identify which items have changed, are added, or are removed.

The output will be:

<li>Apple</li>
<li>Banana</li>
<li>Cherry</li>

This technique allows you to dynamically render lists or grids in your React applications.