CodeBlanks Logo Icon CodeBlanks
Login Register

List and detail

Write the product list and detail pages.

List and detail

The third lesson adds the product list and detail pages. The list renders an array of products as links; the detail reads id with useParams and shows the matching product.

A list item uses the Link component with a to attribute to link to the detail page. The detail component reads the id from the URL with useParams.

If the product is not found, the detail shows a gentle message; this informs the user about a broken link.

Detail page

The detail page reads the URL parameter with useParams and finds the matching product. Example: const { id } = useParams(); then filter the products array.

If the product is not found, showing a 'not found' message is a good practice. It gently informs the user about a broken link.

This pattern provides a consistent transition between list and detail pages; the user reaches the right content even when typing the path manually.

Practice Product list

Complete the skeleton below. Write a ProductList component; take { products }, render a ul with products.map producing an <li><Link to={`/product/${p.id}`}>{p.name}</Link></li> for each. Export it.

Starter code

App.jsx
import { Link } from "react-router-dom";

// Write the ProductList component here

Sample solution

App.jsx
import { Link } from "react-router-dom";

function ProductList({ products }) {
  return (
    <ul>
      {products.map((p) => (
        <li key={p.id}><Link to={`/product/${p.id}`}>{p.name}</Link></li>
      ))}
    </ul>
  );
}

export default ProductList;

Questions and answers

Review the lesson questions together with their answers. To test yourself, solve the lesson interactively.

1 How does the list link to detail?

  • <Navigate>
  • <a href>
  • <Route>
  • <Link to> Correct answer

Explanation: Link to provides the link to the detail page.

2 Using Link

Question 
import { Link } from "react-router-dom";

<li key={p.id}><____ to={`/product/${p.id}`}>{p.name}</Link></li>
Answer 
import { Link } from "react-router-dom";

<li key={p.id}><Link to={`/product/${p.id}`}>{p.name}</Link></li>

Explanation: Link to goes to the detail page.

3 List and detail: match the terms

Term Meaning
Link Creates a link
useParams Reads the id
to={`/product/${id}`} Detail path
products.find Finds the product

All lessons in Intermediate

1 Custom hook basics

  1. What is a custom hook?
  2. useToggle
  3. usePrevious
  4. Summary - Custom hook basics

2 Advanced custom hooks

  1. useLocalStorage
  2. useFetch
  3. useDebounce
  4. Summary - Advanced custom hooks

3 Context deep dive

  1. Context separation
  2. Context + useReducer
  3. Default value and error
  4. Summary - Context deep dive

4 useReducer pattern

  1. The reducer pattern
  2. Action types
  3. Composition
  4. Summary - useReducer pattern

5 Cart management

  1. Project: Cart management
  2. Cart reducer
  3. Cart context
  4. Add product UI

6 useMemo

  1. What is useMemo?
  2. Dependency control
  3. Pitfalls
  4. Summary - useMemo

7 useCallback

  1. What is useCallback?
  2. Sibling re-render
  3. useMemo vs useCallback
  4. Summary - useCallback

8 React.memo

  1. What is React.memo?
  2. Prop comparison
  3. Custom comparator
  4. Summary - React.memo

9 Performance project

  1. Project: Performance
  2. Expensive computation
  3. Stable handler
  4. Memoized list

10 Router basics

  1. What is React Router?
  2. Defining routes
  3. Link and NavLink
  4. Summary - Router basics

11 Advanced router

  1. URL parameters
  2. Nested routes
  3. Programmatic navigation
  4. Summary - Advanced router

12 Multi-page app

  1. Project: Multi-page app
  2. Layout and router
  3. List and detail
  4. Navigation and 404

13 Layout components

  1. The layout pattern
  2. Sidebar and header
  3. Layout with Outlet
  4. Summary - Layout components

14 Error boundary

  1. What is an error boundary?
  2. Class component structure
  3. Fallback UI
  4. Summary - Error boundary

15 Suspense and lazy

  1. What is React.lazy?
  2. Suspense boundary
  3. Multiple boundaries
  4. Summary - Suspense and lazy

16 Portals

  1. What is a portal?
  2. Modal example
  3. Event bubbling
  4. Summary - Portal

17 Advanced useRef

  1. useRef and computation
  2. Measuring
  3. forwardRef
  4. Summary - Advanced useRef

18 RTL tests

  1. React Testing Library
  2. render and screen
  3. Firing events
  4. Summary - RTL tests

19 Dashboard project

  1. Project: Dashboard
  2. Layout and route
  3. Stats widget
  4. Add via modal

20 Intermediate final

  1. Challenge: useFetch hook
  2. Challenge: Theme provider
  3. Challenge: Memoized list
  4. Challenge: Routed cart