To wrap up the React fundamentals: how to show/hide content based on a condition, and how to turn an array of data into multiple components automatically – exactly what we need next for our product list.

Conditional rendering: showing content based on a condition

JSX has no if statement directly in the markup (only expressions are allowed inside {{...}}, see chapter 4). There are three common techniques:

1. The ternary operator (when there are two alternatives)

<p>{isAvailable ? 'In stock' : 'Sold out'}</p>

2. The && operator (when only ONE side should show)

<p>{isOnSale && <span className="badge">Deal!</span>}</p>

isOnSale && ... relies on the fact that JavaScript's && only evaluates the right side when the left side is true – if isOnSale is false, it simply returns false, and React renders nothing at all for false/null/undefined.

3. Early return (when a whole part of the component should be replaced)

function ProductStatus({ product }) {
  if (!product) {
    return <p>No product selected.</p>;
  }

  return <p>{product.name}</p>;
}

Creating lists with .map()

To turn an array into multiple JSX elements, you use the regular JavaScript method .map() – no special React command needed:

const numbers = [1, 2, 3];

<ul>
  {numbers.map((number) => (
    <li key={number}>Number: {number}</li>
  ))}
</ul>

Why the key prop is essential

key is a special prop that React uses ONLY internally (you can't access props.key inside the component) – it helps React precisely tell, when redrawing, which list item corresponds to which data object, instead of recreating the entire list on every change. Without key, React warns in the browser console and falls back to the index – which only works as long as the list's order never changes.

Updating App.jsx: a real product list

Now let's combine it all: a hard-coded array of sample products, rendered via .map(), with a condition for when the list is empty. Replace the content of src/App.jsx:

import ProductCard from './components/ProductCard';

const SAMPLE_PRODUCTS = [
  { sku: 'boots-01', name: 'Hiking Boots', price: 89.99, imageUrl: 'https://picsum.photos/seed/1/300' },
  { sku: 'backpack-01', name: 'Trekking Backpack', price: 59.5, imageUrl: 'https://picsum.photos/seed/2/300' },
  { sku: 'jacket-01', name: 'Rain Jacket', price: 74.0, imageUrl: 'https://picsum.photos/seed/3/300' },
];

function App() {
  return (
    <div className="app">
      <h1>Product Catalog</h1>
      {SAMPLE_PRODUCTS.length === 0 && <p>No products found.</p>}
      <div className="product-grid">
        {SAMPLE_PRODUCTS.map((product) => (
          <ProductCard
            key={product.sku}
            name={product.name}
            price={product.price}
            imageUrl={product.imageUrl}
            onSelect={() => alert(product.name + ' tapped')}
          />
        ))}
      </div>
    </div>
  );
}

export default App;

key={{product.sku}} uses the SKU as a unique key – exactly the real field we'll later (starting chapter 22) also get from the real product API. That wraps up Phase 1: you now know JSX, components, props, state, event handling, conditional rendering, and lists – the foundation for everything that follows.