Adding Interactivity
Quick Answer: Companion guide mapping docs to Scrimba lessons. See below for the roadmap.
Last reviewed: March 2026.
Interactivity is what turns a static page into a web app. In React, this mostly revolves around Events and State.
Who This Is For
Learners following the React or Next.js roadmap.
1. Responding to Events
React follows a simple pattern: on[Event]={handler}.
function Button() {
function handleClick() {
alert('You clicked me!');
}
return (
<button onClick={handleClick}>
Click me
</button>
);
}
Notice:
onClickis camelCase.- We pass
handleClick(the function itself), NOThandleClick()(the result of calling it).
Learn it on Scrimba: -> Interactive Lesson: Event Listeners
2. State: A Component's Memory
Components need to "remember" things: the current input value, the current image, the shopping cart. In React, this memory is called state.
We use the useState Hook:
import { useState } from 'react';
function Counter() {
const [count, setCount] = useState(0);
function increment() {
setCount(count + 1); // Updates state & triggers a re-render
}
return <button onClick={increment}>{count}</button>;
}
Learn it on Scrimba: -> Interactive Lesson: useState Hook
3. Updating Objects in State
React state is immutable. You shouldn't mutate objects directly.
Wrong:
person.firstName = 'Bob'; // Don't do this!
Right:
setPerson({
...person, // Copy the old fields
firstName: 'Bob' // Override the new one
});
Learn it on Scrimba: -> Interactive Lesson: Complex State (Objects)
4. Updating Arrays in State
Arrays in state are also immutable. Don't use push, splice, or direct assignment.
Adding: setItems([...items, newItem])
Removing: setItems(items.filter(i => i.id !== id))
Updating: setItems(items.map(i => i.id === id ? { ...i, ...updates } : i))
Reordering: Copy, then mutate the copy (e.g., swap elements) before passing to setState.
Learn it on Scrimba: -> Interactive Lesson: Complex State (covers objects and arrays)
Project: Build a Meme Generator
FreeMaster state and events by building a meme generator app.
View on Scrimba (opens in a new tab)Choose This If
Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.
Ready to Upgrade Your Learning?
Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.