Skip to main content

Adding interactivity

Quick answer: Static UI is step one; events, useState, and immutable object/array updates are what make an app feel real—each links to a Scrimba lesson you can code along with.

This page covers how React responds to users: wiring events with on* props and handlers, storing component memory with useState, and updating objects and arrays in state by replacing values instead of mutating them. Together, these pieces turn static UI into apps that react to clicks, typing, and other input.

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:

  • onClick is camelCase.
  • We pass handleClick (the function itself), NOT handleClick() (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)

Choose This If​

Choose this page if: You're learning React or Next.js and want a docs-to-Scrimba roadmap.

Scrimba Pro adds Advanced React and paths when you outgrow the free core.

Related Guides

Docs

Learn React Roadmap

→
Docs

React Course Catalog

→
Blog

Scrimba React Learning Path

→

Ready to Upgrade Your Learning?

Use our partner link to claim 20% off Scrimba Pro and unlock all courses and career paths.

Claim 20% Off Scrimba Pro (opens in a new tab)
Last updated on