Common list rendering mistakes in React - Mini Project: Build & Apply

Common List Rendering Mistakes in React

📖 Scenario: You are building a simple React component that shows a list of fruits on a webpage. This is a common task in web apps where you want to display multiple items dynamically.

🎯 Goal: Create a React functional component that renders a list of fruits correctly. You will learn how to set up the data, configure a key for each list item, render the list using map(), and complete the component structure to avoid common mistakes.

📋 What You'll Learn

Create a list of fruits as an array of strings

Add a unique key for each list item when rendering

Use the map() method to render the list inside JSX

Complete the React component with proper return and export

💡 Why This Matters

🌍 Real World

Rendering lists is a very common task in web apps, such as showing products, messages, or user comments. Using keys correctly helps React update the UI efficiently.

💼 Career

Understanding list rendering and keys is essential for React developers to build performant and bug-free user interfaces.

1

DATA SETUP: 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"] to create the array.

2

CONFIGURATION: Prepare a unique key for each fruit

Create a function called getKey that takes two parameters: fruit and index. It should return a string combining fruit and index separated by a dash, like "Apple-0".

React

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

// Create getKey function to generate unique keys
// Your code here

Need a hint?

Use a template string to combine fruit and index with a dash.

3

CORE LOGIC: Render the fruits list with keys using map()

Create a React functional component called FruitList. Inside its return statement, render an unordered list <ul>. Use fruits.map() with parameters fruit and index to create list items <li>. Each <li> must have a key attribute set by calling getKey(fruit, index). The content of each <li> is the fruit string.

React

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

function getKey(fruit, index) {
  return `${fruit}-${index}`
}

// Create FruitList component that renders fruits with keys
// Your code here

Need a hint?

Use parentheses around JSX and return the <ul> with mapped <li> elements having keys.

4

COMPLETION: Export the FruitList component

Add the line export default FruitList at the end of the file to export the component.

React

const fruits = ["Apple", "Banana", "Cherry", "Date", "Elderberry"]

function getKey(fruit, index) {
  return `${fruit}-${index}`
}

function FruitList() {
  return (
    
      {fruits.map((fruit, index) => (
        {fruit}
      ))}
    
  )
}

// Export the FruitList component
// Your code here

Need a hint?

Use export default FruitList to make the component usable in other files.