Render a List

Part of the Fundamentals section of Coddy's React journey — lesson 35 of 42.

Data usually comes in arrays, and map turns an array into a list of elements:

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

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

map calls your arrow function once per item and collects the returned <li> elements. React renders the whole array. Add a fruit to the data and the list grows by itself; the markup never changes.

The key={fruit} attribute gives each item a stable identity. More on it in the next lesson; for now, always include a unique key on the element you return from map.

Challenge

Easy

Render the menu from data.

Inside the <ul id="fruit-list">, use map to render one <li> per fruit in the array.
Each <li> shows the fruit's name and uses it as the key.

Try it yourself

<!DOCTYPE html>
<html>
    <head>
        <link rel="stylesheet" href="styles.css" />
    </head>
    <body>
        <div id="root"></div>
        <script type="module" src="main.jsx"></script>
    </body>
</html>

Test yourself

This lesson includes a short quiz. Start the lesson to answer it and track your progress.

Render a List

All lessons in Fundamentals