Events & Forms

What this module covers

4 steps · React

1. Step 1. Events & Forms

   Handling events: function Btn() { const handleClick = (e) => { e.stopPropagation(); console.log('clicked', e.target); }; return <button onClick={handleClick}>Click</button>; } Controlled components — React fully owns the value: function SearchBox() { const [query, setQuery] = useState(""); return ( <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder="Search..." /> ); } Form submit: const handleSubmit = (e) => { e.preventDefault(); // prevent page reload if (!email.includes("@")) { setError("Invalid email"); return; } console.log("Submit:", email); };

   Without value={name}, the input would manage its own internal DOM state instead of React's state — the two would drift apart the moment you tried to reset or validate it programmatically. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Add value and onChange to make the input controlled.

2. Step 2. Quiz: Events & Forms

   Answer these questions about event handling and controlled inputs.

   e.preventDefault() stops a form's default reload; a controlled input's value comes from state via onChange. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Answer the quiz below.

3. Step 3. Password Strength Meter

   Build a password strength meter. As the user types, show Weak/Medium/Strong based on length and whether it contains numbers and symbols.

   A derived "score" variable computed fresh from password on every render is simpler and less error-prone than trying to track strength as its own piece of state. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the component compute and display a strength label from the password?

4. Step 4. Mini project: Events & Forms

   Build a password strength meter. As the user types, show Weak/Medium/Strong based on length and whether it contains numbers and symbols. Turn the completed challenge into a small standalone project. Add realistic content, clear naming, one edge case or error state, and a short README-style explanation of how the main idea works.

   A derived "score" variable computed fresh from password on every render is simpler and less error-prone than trying to track strength as its own piece of state. This project stage asks you to apply the same idea without step-by-step scaffolding. In React, make the state/interaction visible in the UI so completion is easy to verify.

   Check yourself: [React] Does the component compute and display a strength label from the password?