Rendering lists in React - Mini Project: Build & Apply

Rendering lists in React

📖 Scenario: You are building a simple React app that shows a list of fruits. You want to display each fruit name on the page.

🎯 Goal: Build a React functional component that renders a list of fruit names using the map() method.

📋 What You'll Learn

Create an array of fruit names

Create a variable to hold the list items

Use map() to transform the array into JSX list elements

Render the list inside a <ul> element

💡 Why This Matters

🌍 Real World

Rendering lists is a common task in React apps to display collections like menus, user comments, or product lists.

💼 Career

Understanding how to render lists with keys is essential for React developers to build efficient and bug-free user interfaces.

1

Create the fruits array

Create a constant array called fruits with these exact string values: 'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'.

React

// Create the fruits array with the exact values
// Your code here

Need a hint?

Use const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];

2

Create the listItems variable

Create a constant called listItems and set it to null for now.

React

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

// Create listItems variable and set it to null
// Your code here

Need a hint?

Write const listItems = null;

3

Use map() to create list items

Change the listItems constant to use fruits.map() to create an array of <li> elements. Use fruit as the iterator variable. Each <li> should have a key attribute set to the fruit name and display the fruit name inside.

React

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

// Use map() to create listItems with  elements and keys
// Your code here

Need a hint?

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

4

Render the list inside a component

Create a React functional component called FruitList that returns a <ul> element containing the listItems. Export the component as default.

React

const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
const listItems = fruits.map(fruit => {fruit});

// Create FruitList component that returns  with listItems
// Your code here

Need a hint?

Write a function FruitList that returns <ul>{listItems}</ul> and export it.