So far, your landing page is a beautiful static page — it looks great but doesn't do anything. In this lesson, we make it interactive. When someone types their email and clicks "Submit," things will happen.
What is "State"?
Concept
State is the app's short-term memory. When a user types in a form field, the app needs to remember what they typed. When they click submit, the app needs to remember whether the submission succeeded or failed. These temporary, changing values are "state."In React (the library behind Next.js), state is managed with a tool called useState. You don't need to write this code — Claude will — but understanding the concept helps you direct Claude better.
For example, your signup form will have state for:
- The email text the user is typing
- Whether the form is currently submitting (loading)
- Whether the submission succeeded or failed
- Any error messages to display
Building the Signup Form
Let's upgrade the placeholder form from Lesson 5 into a real, interactive one:
Try It
In Claude Code, type:"Update the email signup form in the hero section to be fully interactive. It should: - Validate that the email is a real email format before submitting - Show a loading spinner on the submit button while processing - After 'submission' (just simulate it with a 1-second delay for now), show a green checkmark icon and the message 'Thanks! You're on the list.' - If the email is invalid, show a red error message below the input: 'Please enter a valid email address.' - The input should clear after successful submission - Make the form a client component (add 'use client' at the top)"
Claude will create or update the form component with all of this logic. Check your browser — try submitting with a valid and invalid email to see both paths work.
Handling Form Submission
Right now, the form shows a success message after a fake delay. It doesn't actually send the email anywhere yet — we'll connect it to a real backend in Lesson 7.
Here's what's happening under the hood:
- User types their email (state updates with each keystroke)
- User clicks Submit (state changes to "loading")
- Form validates the email format
- If valid: simulates a network request, then shows success state
- If invalid: shows error state
Concept
This pattern — capture input, validate, submit, show result — is how every form in every app in the world works. You just built one by describing it in English.Adding Animations and Polish
A little animation goes a long way in making your app feel professional:
Try It
Try these prompts one at a time in Claude Code:1. "Add a subtle fade-in animation when the page loads. Each section should fade in with a slight delay."
2. "Make the submit button have a hover effect — slightly brighter color and a subtle shadow lift."
3. "When the success message appears, animate it with a smooth fade-in and scale-up from 95% to 100%."
Common Problems and How to Fix Them
As a beginner, you'll run into issues. Here's how to use Claude to fix them:
"The form doesn't do anything when I click submit" Tell Claude: "The form submit button doesn't seem to work. Can you check the onClick/onSubmit handler and make sure it's wired up correctly?"
"The page looks broken on mobile" Tell Claude: "The form looks broken on mobile — the input and button are overlapping. Fix the responsive layout."
"I got an error in the terminal" Copy the exact error message and paste it to Claude: "I'm getting this error: [paste error]. What's wrong and how do I fix it?"
Pro Tip
When debugging, always share the exact error message with Claude. Don't paraphrase it. The error text contains specific information that Claude needs to diagnose the problem."The page is blank / shows a white screen" This usually means there's a JavaScript error. Open your browser's Developer Tools (F12), go to the Console tab, and share what you see with Claude.
Git Checkpoint
Your form is interactive, validated, and animated. Save your progress:
git add .
git commit -m "interactive signup form with validation and animations"
Honest Note
Interactive features are where things can get tricky. The simulated submission we built works perfectly in development, but connecting it to a real server (next lesson) introduces new challenges: network errors, slow connections, race conditions. AI handles most of this well, but understanding that these challenges exist will help you ask Claude the right questions.Key Takeaway
Interactive features are where apps come alive. You're now building something that responds to user input — validating emails, showing loading states, displaying results. And you did it by having a conversation with AI.