Map function usage in React - Mini Project: Build & Apply

Map Function Usage in React

📖 Scenario: You are building a simple React component that shows a list of fruits on a webpage. Each fruit name should appear as a separate item in a list.

🎯 Goal: Create a React functional component that uses the map function to display each fruit from an array as a list item inside an unordered list.

📋 What You'll Learn

Create an array of fruits with exact values: 'Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'.

Create a variable called fruitList that uses map to convert each fruit into a <li> element with a unique key.

Render the fruitList inside a <ul> element in the component return.

Use a functional component named FruitList.

💡 Why This Matters

🌍 Real World

Displaying lists of items dynamically is common in web apps, such as showing products, messages, or user profiles.

💼 Career

Understanding how to use map in React to render lists is a fundamental skill for frontend developers working with React.

1

Create the fruits array

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

React

import React from 'react';

export default function FruitList() {
  // Create the fruits array here
}

Need a hint?

Use const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry']; inside the component.

2

Create the fruitList variable using map

Inside the FruitList component, create a constant called fruitList that uses fruits.map to return a list of <li> elements. Each <li> should have a key set to the fruit name and display the fruit name as text.

React

import React from 'react';

export default function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  // Create fruitList using map here
}

Need a hint?

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

3

Render the fruitList inside a <ul>

In the return statement of the FruitList component, return a <ul> element that contains the fruitList variable.

React

import React from 'react';

export default function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  const fruitList = fruits.map(fruit => {fruit});
  // Return the fruitList inside a  here
}

Need a hint?

Use return <ul>{fruitList}</ul>; to render the list.

4

Complete the FruitList component

Ensure the FruitList component is a default export and uses a functional component syntax with the fruits array, fruitList variable, and returns the <ul> with the mapped list items.

React

import React from 'react';

// Final check: ensure the component is complete and exported

export default function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  const fruitList = fruits.map(fruit => {fruit});
  return {fruitList};
}

Need a hint?

Make sure the component is exported as default and returns the mapped list inside a <ul>.