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:

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

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:

Explanation:

• We use useState to keep track of the form fields (title and author), a message for feedback, and a number to help re-render the list.

After adding a new book, we want the list of books to update right away. We use the getBooks() function to get the latest list and display it using a BookGrid component.

Here’s the relevant part of the code:

Explanation:

• The BookGrid component displays the list of books. It receives the current list from getBooks().
• The key={version} trick is used to force React to re-render the grid whenever a new book is added. This ensures the UI always shows the latest list.

Another subtle but important point is how BookGrid is reused here. Instead of building a brand-new component for the reading list, we are passing in the data (getBooks()) to the existing BookGrid. This demonstrates component reusability — you write a display component once, and it can be used in different contexts as long as it receives the right props. This makes your codebase smaller, easier to maintain, and less error-prone.

Also note the use of the key={version} trick. Keys in React usually help identify which items in a list have changed, but here we’re using the key at the container level. By changing the key, we essentially force React to throw away the old tree and rebuild the BookGrid from scratch, which guarantees it reflects the updated book list.

To make the reading list accessible, we need to connect it to the app’s navigation and routing. This is done in the router configuration and the main app layout.

Here’s how the route is added:

And here’s how the navigation link is added:

Explanation:

• The ReadingListView component is registered as a route at /reading-list.
• A navigation link is added so users can easily access the reading list from anywhere in the app.

Now, when you click "Reading List" in the navigation bar, you will see the form and the current list of books.

This demonstrates the separation of concerns in a React app:

• The router defines where in the app the reading list can be found.
• The navigation bar defines how the user can get there.
• The ReadingListView defines what is displayed once the route is active.

Breaking these responsibilities apart makes it much easier to scale the app. For example, if you wanted to change the navigation style or rename the route, you could do so without touching the logic of the reading list itself.

In this lesson, you learned how to build a dynamic, in-memory reading list in your React app. You created a form for adding new books, updated the list in memory, and displayed the updated list right away. You also connected this new feature to your app’s navigation using React Router.

These are important skills for building interactive web apps. Next, you will get a chance to practice these steps yourself in the hands-on exercises. You will reinforce what you learned by building and updating your own reading list feature. Good luck, and have fun coding!