Managing State and Events

Welcome back! In the last lesson, you learned how to build reusable components and pass data to them using props. Now, you are ready to make your React app interactive. In this lesson, you will learn how to let users add new books to a reading list and see the list update right away. This is possible thanks to two important ideas in React: state and event handling.

State lets your app remember things, like which books are in your list or what the user has typed into a form. Event handling lets your app respond to user actions, such as clicking a button or submitting a form. By the end of this lesson, you will know how to use both to build a simple, interactive reading list.

In React, the key to making apps interactive is state. State represents values that change over time and that React needs to keep track of in order to re-render the UI correctly. Without state, your components would only be able to display static content.

Why not just use let?

You might wonder: why not write something like this?

let title = "";
title = "New Title"; // update it later

The problem is that React won’t know this value has changed. React’s rendering system is built around the idea that when state updates, the component should re-render to reflect the change. If you use a plain variable, React has no way of detecting that change, so the UI will stay the same on screen.

Introducing useState

React solves this with the useState hook:

function App() {
  const [books, setBooks] = useState<Book[]>(initialBooks);
  const [newTitle, setNewTitle] = useState("");
  const [newAuthor, setNewAuthor] = useState("");
  // ...
}

Hook: A hook is a special React function that lets you “hook into” internal features like state and lifecycle. All hooks start with use, e.g. useState, useEffect.

• useState: This hook gives you two things:

  • A state variable (like books, newTitle, newAuthor).
  • A setter function (like setBooks, setNewTitle, setNewAuthor) that updates the state.

• Initial State: The value you pass into useState(...) is the initial state. For example:

  • useState<Book[]>(initialBooks) means the list of books starts with two predefined items.
  • useState("") means both newTitle and newAuthor start as empty strings.

Here’s what happens under the hood:

• On the first render, React uses the initial state you provide.
• When you call a setter like setBooks, React:
  • Updates the state internally.
  • Triggers a re-render of the component.
• On the next render, the component sees the new state values and updates the UI accordingly.

Because React re-renders every time state changes, the UI always stays in sync with the underlying data. This is the core of React’s “declarative” model: you describe what the UI should look like for a given state, and React ensures the screen matches that description.

• State is for values that change over time and affect what gets rendered.
• You can’t just use let — React needs to know when to re-render.
• Hooks are special functions that give functional components extra capabilities.
• Initial state is the starting value you pass to useState; React preserves and updates it between renders.

With useState, your components can evolve from static templates into living, interactive UI elements.

Now, let’s see how you can let users add new books to the list. This is done with a form and an event handler.

Here’s the relevant part of the code:

const handleAddBook = (e: FormEvent) => {
  e.preventDefault();
  if (!newTitle.trim() || !newAuthor.trim()) return;
  setBooks((prev) => [...prev, { title: newTitle.trim(), author: newAuthor.trim() }]);
  setNewTitle("");
  setNewAuthor("");
};

return (
  <form onSubmit={handleAddBook} className="mt-6 flex flex-col md:flex-row gap-4" aria-label="Add a new book">
    <input id="title" value={newTitle} onChange={(e) => setNewTitle(e.target.value)} placeholder="Book Title" />
    <input id="author" value={newAuthor} onChange={(e) => setNewAuthor(e.target.value)} placeholder="Author" />
    <button type="submit">Add Book</button>
  </form>
);

Let’s walk through what happens:

• The form has two input fields: one for the book title and one for the author.
• Each input’s value is controlled by state (newTitle and newAuthor). When the user types, the onChange event updates the state.
• When the form is submitted, the handleAddBook function runs.
  • e.preventDefault() stops the page from reloading.
  • If either field is empty, nothing happens.
  • Otherwise, a new book is added to the books array using setBooks.
  • The input fields are cleared by setting newTitle and newAuthor back to empty strings.

Example Output:
If you type "1984" as the title and "George Orwell" as the author, then click "Add Book," the new book will appear in your list.

Why onChange={(e) => setNewTitle(e.target.value)}

• Inputs are controlled components here: the value comes from state, and onChange updates state. This keeps a single source of truth (state), ensuring the UI always mirrors state.
• onChange={(e) => ...} creates an inline handler that receives the synthetic event e, then reads the current input text from e.target.value and saves it to state via setNewTitle.
• You could also define a named handler:

const handleTitleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
  setNewTitle(e.target.value);
};
// ...
<input value={newTitle} onChange={handleTitleChange} />

Why e.preventDefault()?

• HTML forms submit to the server and reload the page by default. In a SPA (Single Page Application), we prevent the default to keep the user on the same page and handle the submission entirely in JavaScript (updating React state instead).

Important: Why onSubmit={handleAddBook} and not onSubmit={handleAddBook()}?

• In JSX, onSubmit={handleAddBook} passes a function reference to React. React will call it later when the submit event occurs.
• onSubmit={handleAddBook()} calls the function immediately during render and passes its return value (likely undefined) as the handler. This triggers your logic at render time (bad) and leaves no handler for the actual submit event.
• Rule of thumb: pass a function (no parentheses) to event props, unless you’re defining an inline arrow function.

The same idea applies to onClick, onChange, etc.: pass a function, don’t invoke it during render.

The ... (spread) operator

There are two “spread” contexts you’ll commonly use:

1. Array spread: setBooks((prev) => [...prev, newBook])
   • Creates a new array containing all previous items plus newBook.
   • Maintains immutability (we don’t mutate prev with .push()), which helps React detect changes and re-render correctly.
2. Object spread (not shown above): { ...book, title: "New" }
   • Creates a new object copying all props from book, then overrides fields you specify.

Why immutability matters: React state updates should return new references. Mutating existing arrays/objects can lead to subtle bugs because React may not detect a change.

What happens on submit?

• User clicks Add Book (or presses Enter).
• React fires the submit event, calls your handler (because you passed the function reference).
• The handler:
  • Prevents default navigation.
  • Validates inputs.
  • Uses functional + immutable update to append a new book.
  • Clears the inputs by setting state to "".
• React re-renders with the updated books and empty input fields.

This pattern—controlled inputs + event handlers + immutable updates—is the backbone of building reliable, interactive forms in React.

Now, let’s see how the list of books is displayed and how it updates when you add a new book.

Here’s the code that renders the book list:

{books.length === 0 ? (
  <p className="mt-8 text-slate-400">No books yet. Add your first one above!</p>
) : (
  <div className="mt-8 grid grid-cols-1 md:grid-cols-3 gap-6">
    {books.map((book) => (
      <BookCard
        key={`${book.title}-${book.author}`}
        title={book.title}
        author={book.author}
      />
    ))}
  </div>
)}

• If there are no books, a message is shown.
• If there are books, each one is displayed using the BookCard component.
• When you add a new book, the books state changes, and React automatically re-renders the list to include the new book.

Breaking It Down

• Ternary operator (? :): We use the ternary operator (covered earlier) to choose between two outputs:
  • If books.length === 0, show a fallback message.
  • Otherwise, show a grid of BookCard components.
• map function: The map method loops through the books array and transforms each book object into a BookCard element. This is a common React pattern: use map to turn data arrays into lists of components.
• Keys in lists: Each BookCard gets a key. Keys help React efficiently update lists by identifying which items changed, were added, or removed.

Example Output:
After adding "1984" by "George Orwell," your list will look like this:

Dune by Frank Herbert
The Hobbit by J.R.R. Tolkien
1984 by George Orwell

The DOM (Document Object Model) is the browser’s way of representing a webpage.
Think of it as a tree structure of everything on the page:

<html> 
<body> 
<h1>Hello</h1> 
<p>Welcome to my page</p> 
</body> 
</html>

• The <h1> is one branch of the tree.
• The <p> is another branch.
• When you change something (like updating text), the browser updates this tree and the screen.

Changing the DOM directly can be slow if you do it often, because the browser has to recalculate styles, re-layout the page, and repaint pixels.

One of React’s biggest performance advantages is how it handles the DOM (Document Object Model):

• Traditional DOM: In plain JavaScript, if something changes, you often re-render or replace large parts of the DOM manually. This can be slow because the browser has to recalculate layout, repaint, etc.

• React doesn’t touch the real DOM immediately. Instead, it uses something called the Virtual DOM. React keeps a lightweight “virtual” representation of the DOM in memory.

  • When state changes, React creates a new virtual DOM tree.
  • React compares (or diffs) the old virtual tree with the new one to see exactly what changed.
  • Finally, it applies only the minimal updates needed to the real DOM.

This process is why React feels fast: the browser only updates the parts of the screen that truly changed.

If you add a new book to the list, React won’t redraw the whole page — it will only add one new <BookCard> to the DOM. This makes updates feel fast and efficient.

When rendering arrays (like books.map(...)), React uses the key prop to track each element between renders:

• If a BookCard has the same key across renders, React reuses the existing DOM node.
• If the key changes, React removes the old node and creates a new one.
• Stable keys (like IDs) mean fewer unnecessary removals and insertions, leading to smoother UI updates.

Rule of thumb: Always use a stable id from your data as the key whenever possible. Use array indices only as a fallback.

In this lesson, you learned how to make your React app interactive by managing state and handling events. You saw how to use the useState hook to keep track of the book list and form inputs, and how to handle form submissions to add new books. You also saw how React updates the UI automatically when state changes.

Next, you will get a chance to practice these skills by working through hands-on exercises. You will use state and event handling to build your own interactive features. Good luck, and have fun experimenting!