Keys concept in React - Mini Project: Build & Apply

React Keys Concept

📖 Scenario: You are building a simple React app that shows a list of fruits. Each fruit should be displayed as a separate item.

🎯 Goal: Create a React component that renders a list of fruits using the map() method. Use the key prop correctly to help React identify each item uniquely.

📋 What You'll Learn

Create an array of fruit names

Add a variable for a unique key prefix

Use map() to render each fruit inside a <li> element

Add a unique key prop to each <li> using the prefix and index

Render the list inside a <ul> element

💡 Why This Matters

🌍 Real World

Lists are everywhere in web apps, like menus, product lists, or messages. Using keys helps React update only changed items efficiently.

💼 Career

Understanding keys is essential for React developers to build performant 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

import React from 'react';

export default function FruitList() {
  const fruits = [];
  // Your code here
  return (
    
      {/* Fruit list will go here */}
    
  );
}

Need a hint?

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

2

Add a key prefix variable

Add a constant string variable called keyPrefix and set it to 'fruit-' inside the FruitList component, below the fruits array.

React

import React from 'react';

export default function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  const keyPrefix = '';
  // Your code here
  return (
    
      {/* Fruit list will go here */}
    
  );
}

Need a hint?

Use const keyPrefix = 'fruit-'; to create a prefix for keys.

3

Render the fruit list with keys

Use fruits.map() to create a list of <li> elements inside a <ul>. Use fruit and index as parameters in the map callback. Add a key prop to each <li> with the value {keyPrefix + index}. Display the fruit name inside each <li>.

React

import React from 'react';

export default function FruitList() {
  const fruits = ['Apple', 'Banana', 'Cherry', 'Date', 'Elderberry'];
  const keyPrefix = 'fruit-';
  return (
    
      
        {/* Use map to render fruits here with keys */}
      
    
  );
}

Need a hint?

Use fruits.map((fruit, index) => <li key={keyPrefix + index}>{fruit}</li>) inside a <ul>.

4

Complete the component export

Ensure the FruitList component is exported as the default export and the JSX structure includes the <ul> with the mapped fruit items and keys.

React

import React from 'react';

// Ensure the component is exported and JSX is complete
// Your code here

Need a hint?

Make sure the component is exported with export default function FruitList() and returns the full JSX with keys.