Lists, keys and conditional rendering

In this tutorial you will build a menu page for Brew & Bean, a small coffee shop in Indiranagar, Bengaluru. The page shows a list of items, lets the customer filter by category, and shows a friendly message when nothing matches.

Prerequisites: a Vite + React project (see *Start a React project with Vite*), and you know components, props and useState (see *Components and JSX*, *Props and composition* and *State and events*). Plain JavaScript (JSX) is used throughout.

Real data usually arrives as an array: a menu, a list of orders, search results. React has no special loop syntax. Instead you use the JavaScript array method map(), which turns each item of an array into something else. Here, each menu object becomes a piece of JSX.

Think of a kitchen printer: for every order slip (data) it prints one ticket (UI). map() is the printer.

export const MENU = [
  { id: 'espresso', name: 'Espresso', category: 'coffee', price: 120 },
  { id: 'cappuccino', name: 'Cappuccino', category: 'coffee', price: 180 },
  { id: 'cold-brew', name: 'Cold Brew', category: 'coffee', price: 220 },
  { id: 'filter-coffee', name: 'Filter Coffee', category: 'coffee', price: 80 },
  { id: 'masala-chai', name: 'Masala Chai', category: 'tea', price: 90 },
  { id: 'croissant', name: 'Butter Croissant', category: 'bakery', price: 150 },
  { id: 'banana-bread', name: 'Banana Bread', category: 'bakery', price: 130 },
  { id: 'veg-sandwich', name: 'Veg Grilled Sandwich', category: 'food', price: 160 },
];

Our sample data. Create this file first; every later step imports it.

import { MENU } from './menuData';

function App() {
  return (
    <main>
      <h1>Brew & Bean menu</h1>
      <ul>
        {MENU.map((item) => (
          <li key={item.id}>
            {item.name} - ₹{item.price}
          </li>
        ))}
      </ul>
    </main>
  );
}

export default App;

The curly braces drop into JavaScript. map() returns an array of <li> elements and React renders them in order.

Notice the arrow function uses round brackets ( ... ) after =>, not curly braces. Round brackets return the JSX directly. If you write { ... } you must add the word return, or you will get an empty list and no error. This is the most common beginner slip.

A list item usually grows: a price, a badge, a button. Move it into its own component so App stays readable. The key stays on the element you create inside map(), which is now <MenuItem />, not inside the component.

import { MENU } from './menuData';
import MenuItem from './MenuItem';

function App() {
  return (
    <main>
      <h1>Brew & Bean menu</h1>
      <ul>
        {MENU.map((item) => (
          <MenuItem
            key={item.id}
            name={item.name}
            price={item.price}
            category={item.category}
          />
        ))}
      </ul>
    </main>
  );
}

export default App;

key is used by React itself. MenuItem never receives it as a prop.

If you left the key out, the page would still render but the browser console would warn: "Each child in a list should have a unique key prop". A key is the item's identity. When the list changes (an item is added, removed or reordered), React compares old keys with new keys to decide which elements to keep, move or delete.

Without stable keys React matches items by position. Insert one item at the top and every other item looks "changed", so React may reuse the wrong DOM element. You then see odd bugs: a text box keeps the typed text of a different row, or an animation plays on the wrong item.

Conditional rendering means showing different UI depending on data or state. There is no special syntax: you use ordinary JavaScript inside JSX. Three patterns cover almost everything.

Now combine both ideas. We keep the selected category in state, derive the filtered list from it, and render a message when the filtered list is empty. Do not store the filtered list in state: it can always be calculated from MENU and the selected category, so storing it only creates a chance for the two to disagree.

import { useState } from 'react';
import { MENU } from './menuData';
import MenuItem from './MenuItem';

function App() {
  const [category, setCategory] = useState('all');

  const categories = ['all', ...new Set(MENU.map((item) => item.category))];

  const visibleItems =
    category === 'all'
      ? MENU
      : MENU.filter((item) => item.category === category);

  return (
    <main>
      <h1>Brew & Bean menu</h1>

      <div>
        {categories.map((c) => (
          <button
            key={c}
            onClick={() => setCategory(c)}
            style={{ fontWeight: c === category ? 'bold' : 'normal' }}
          >
            {c}
          </button>
        ))}
      </div>

      {visibleItems.length === 0 ? (
        <p>Nothing here yet.</p>
      ) : (
        <ul>
          {visibleItems.map((item) => (
            <MenuItem
              key={item.id}
              name={item.name}
              price={item.price}
              category={item.category}
            />
          ))}
        </ul>
      )}
    </main>
  );
}

export default App;

Clicking a button updates state, React re-runs App, the filter is recalculated and the list is redrawn. The selected button is bold.

I am learning React. Review this component that renders a list. Check the key I chose, the conditional rendering, and anything that could cause bugs when items are added, removed or reordered. Explain each problem in plain English with a one-line fix.

---
[paste your component here]
---

What to expect: A good answer names the exact line, explains why index or random keys cause bugs, and does not rewrite the whole file.