Building a Reading List

Introduction: Building a Dynamic 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 .

Revisiting the In-Memory Data Store

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: TypeScript // 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

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Creating the Add Book Form

Let’s start by building a form that lets users add new books to the reading list. The form will have two fields: one for the book title and one for the author. We will also add some simple validation to make sure both fields are filled in before adding the book.

Here is the main part of the form, taken from the ReadingListView component:

import { FormEvent, useState } from 'react';
import { addBook, getBooks } from '../catalog/mockData';
import BookGrid from '../catalog/BookGrid';

export default function ReadingListView() {
  const [title, setTitle] = useState('');
  const [author, setAuthor] = useState('');
  const [message, setMessage] = useState('');
  const [version, setVersion] = useState(0); // bump to re-render grid

  const onSubmit = (e: FormEvent) => {
    e.preventDefault();
    const t = title.trim();
    const a = author.trim();
    if (!t || !a) {
      setMessage('Please provide both a title and an author.');
      return;
    }
    const created = addBook(t, a);
    setMessage(`Added: ${created.title} by ${created.author}`);
    setTitle('');
    setAuthor('');
    setVersion((v) => v + 1);
  };

  return (
    <section>
      <h1 className="text-3xl font-bold">Reading List</h1>
      <p className="mt-2 text-slate-400">Add books to your in-memory list.</p>

      <form onSubmit={onSubmit} className="mt-6 flex flex-col md:flex-row gap-4" aria-label="Add a new book">
        <label className="sr-only" htmlFor="title">Book Title</label>
        <input
          id="title"
          value={title}
          onChange={(e) => setTitle(e.target.value)}
          placeholder="Book Title"
          className="bg-slate-800 p-2 rounded-md flex-grow"
        />
        <label className="sr-only" htmlFor="author">Author</label>
        <input
          id="author"
          value={author}
          onChange={(e) => setAuthor(e.target.value)}
          placeholder="Author"
          className="bg-slate-800 p-2 rounded-md flex-grow"
        />
        <button type="submit" className="bg-sky-500 hover:bg-sky-600 px-4 py-2 rounded-md font-semibold">
          Add Book
        </button>
      </form>

      {message && <p className="mt-3 text-sky-300">{message}</p>}

      {/* ... */}
    </section>
  );
}

Explanation:

We use useState to keep track of the form fields (title and author), a message for feedback, and a version number to help re-render the list.
The onSubmit function checks that both fields are filled in. If not, it shows a message. If both are filled, it adds the book using addBook, shows a confirmation message, and clears the form.
The form uses standard React patterns for handling input and submission.

One key design detail is the version state variable. At first, it might look confusing — why do we need an extra counter when we’re already adding books to the list? The reason is that React’s rendering only reacts to state or prop changes. Since getBooks() pulls data directly from a local array, React would not automatically re-render when a new book is added. By incrementing version every time we add a book, we trigger React to re-render the component tree, ensuring the BookGrid shows the latest data.

This technique is often used when working with data that lives outside of React’s state system. Later, when we integrate with a backend or use more advanced state management, we’ll see different patterns for triggering updates without relying on this manual version bump.

Example Output:

When you fill in the form and click "Add Book," you will see a message like:

Added: The Martian by Andy Weir

If you leave a field empty, you will see:

Please provide both a title and an author.

Introduction: Building a Dynamic Reading List

Revisiting the In-Memory Data Store

Join the 1M+ learners on CodeSignal

Creating the Add Book Form

Updating and Displaying the Reading List

Integrating the Reading List View with Routing

Summary And Practice Preview