Render Conditional Content and Keyed Lists

A featured product can be either a Product or null. Use an early return when product === null: it selects the complete fallback before any JSX reads product fields.

Once that guard returns, TypeScript knows product is available in the remaining JSX. Use a ternary expression only for the short stock label, because the heading and product name stay the same.

In src/App.tsx, this component handles both the absent and available cases.

The early return changes the entire component output for an absent record. For an available record, the ternary expression changes only the stock words inside shared JSX.

This division keeps each condition focused: one branch for availability, one branch for a small display difference.

A component can intentionally render nothing. ProductNote receives a nullable note; when the value is absent, its early return is null. React adds no element and no placeholder text for that component.

Once the note === null guard has passed, TypeScript treats note as a string, so the remaining JSX can display it.

Use this helper in src/App.tsx when a note should occupy no interface space if it is absent.

Logical AND can conditionally include a short JSX fragment. With a Boolean condition, true && <p>...</p> produces the paragraph, while false && <p>...</p> produces false, which React does not display.

Do not use a number itself as the left side. When offerCount is 0, 0 && <p>...</p> evaluates to the numeric value 0; React renders that value as visible text. Compare the count explicitly so the left side is always a Boolean.

Both fragments test the same offer message. Only the second condition is guaranteed to be Boolean.

ProductList receives a typed Product[] and turns it into sibling ProductRow elements with products.map(...). Each callback result becomes one row because ProductRow returns one <li>.

The array order becomes the visible row order. ProductList supplies the surrounding <ul>, while each row receives only the fields in its prop contract: productId, name, and inStock.

Add key={product.id} to every mapped row from the start. Here, the key is React's sibling identifier; later, you will examine why the record identifier is the right choice.

Place this complete example in src/App.tsx. The three records are mapped in their array order, so the shelf shows three rows in that same order.

featuredProduct can be null, which means that one record is absent. In contrast, products is always a Product[]. When it contains [], the collection is available but has no records.

Give that valid empty collection a visible empty state. Do not render an unexplained empty <ul>.

Check the array length before creating the list container. The early return replaces the entire list branch: for an empty array, there is no <ul> at all.

Do not use if (products). Even [] is truthy in JavaScript, so that check cannot distinguish an empty collection from a populated one.

A ProductList owns the collection-level branch, while each ProductRow still returns exactly one list item.

When a mapped list changes, React uses keys to match sibling elements with their corresponding records across renders. A key should remain attached to the record—not to where that record happens to appear today.

Start with p-101 → p-102 → p-103. If p-102 is removed and the order becomes p-103 → p-101, the remaining records still have the same record identifiers. Their positions changed, but their identities did not.

A stable key is unique among the current siblings and continues to mean the same record when the collection changes. It does not need to be globally unique across the whole application.

For Supply Shelf, product.id is a stable record identifier. An array index identifies a position, so it can point to a different record after removal or reordering. A random value is worse: it changes on every render.

Stable keys help React perform correct identity matching. They do not promise that a component will not render.

A map callback creates a set of siblings. Put the key on the outermost element that the callback returns, because that is the boundary where React compares those siblings.

If the callback returns an <li>, the <li> receives the key. If it returns a <ProductRow />, the ProductRow receives the key. A stable key uses the record identifier, such as product.id.

key is special: React consumes it while matching siblings. It is not delivered to ProductRow as a normal prop.

In this Supply Shelf mapping, the callback returns ProductRow, so key={product.id} belongs on ProductRow. The child receives productId separately because it needs to display Item: p-101-style identifiers.

The stock label remains ordinary rendering logic inside the child.

Use this pattern in src/App.tsx. The parent supplies both React's sibling identifier and the child-readable record identifier.

This version has an inner key and omits the child-readable identifier from the parent mapping. Repair it locally before answering.

Build the complete Supply Shelf pattern in your local src/App.tsx. It combines:

• an early return for an absent featured product;
• a ProductNote that returns null for an absent note;
• an explicit positive-count check before showing offers;
• a semantic list with an empty state;
• record-based keys on the mapped ProductRow siblings.

Copy the three code sections in order. Then inspect each static variation with your local development server. Change one fixture at a time and restore it before the next check.

Part 1 of 3 — place this first in src/App.tsx. This is the initial section of the file, not a runnable file by itself; the helper components follow in Parts 2 and 3.

Part 2 of 3 — append these typed helper components below Part 1 in the same file.

Part 3 of 3 — append this below Part 2. It completes the executable src/App.tsx file. Run your existing local development server and compare the initial browser output with the result below.