Building a Reading List

Welcome back! In the last lesson, you learned how to display a list of books using mock data and how to make your catalog interactive with search and pagination. Now, we will take the next step by letting users add their own books to a reading list that updates instantly in the browser. This is called an "in-memory" list because the data lives only in the browser’s memory and is not saved to a server or database.

By the end of this lesson, you will know how to:

• Build a form for adding new books,
• Update the list of books in memory,
• Display the updated list right away,
• Connect this new feature to your app’s navigation.

This is a common pattern in modern web apps, and it will help you understand how to manage user input and dynamic data in React.

Before we dive in, let’s quickly remind ourselves how the app is structured and how mock data is set up. You have already seen how the app uses a consistent layout and routes to different pages. For the reading list, we will use a simple in-memory data store.

Here’s a summary of the mock data setup:

// src/features/catalog/mockData.ts
export type Book = { id: number; title: string; author: string };

// Local in-memory store for mock data used across pages.
let books: Book[] = [
  { id: 1, title: 'Dune', author: 'Frank Herbert' },
  { id: 2, title: 'The Hobbit', author: 'J.R.R. Tolkien' },
  // ...more books
];

let nextId = books.length + 1;

export function getBooks(): Book[] {
  return books;
}

export function addBook(title: string, author: string): Book {
  const newBook: Book = { id: nextId++, title: title.trim(), author: author.trim() };
  books = [...books, newBook];
  return newBook;
}

This file keeps a list of books in memory and provides two functions:

• getBooks() returns the current list of books.
• addBook(title, author) adds a new book to the list.

This setup allows us to update and display the book list without needing a backend server.

The nextId variable ensures that each new book gets a unique identifier, even if multiple books have the same title or author. This is crucial in React because components like BookGrid rely on unique IDs to render efficiently.

It’s also worth highlighting that while this feels similar to a backend, there is no persistence here. Later in the course, we will swap this mock system with a real backend API. For now, treating this as a “mini-database” helps you focus on the UI and data flow first