Store the smallest data needed to reproduce the screen.

Read the explanation, run the worked example, then complete the matching Examples and Assignments tabs. Your original materials remain available alongside these notes.

Understand the idea

useState returns the current render’s value and a setter that requests another render. The existing variable does not change inside a running handler. When the next value depends on the previous one, use the updater form; React can process queued updates in order.

Arrays and objects in state must be replaced, not edited in place. Add with spread, remove with filter and edit with map. Derive totals and sorted views during render instead of storing duplicate copies that can disagree. Controlled inputs pair value with onChange; checkboxes pair checked with onChange.

User input ↓ Event handler ↓ State update ↓ Render updated UI

Run the example

Use a separate React practice project with a Node.js version supported by Vite. Create it once with these commands, then use its development URL. Do not paste this into the Edupoly website’s own source files.

npm create vite@latest react-practice -- --template react
cd react-practice
npm install
npm run dev

Replace src/App.jsx with the following complete example. Keep Vite’s generated src/main.jsx entry point.

src/App.jsx

import { useState } from 'react';
export default function App() {
  const [text, setText] = useState('');
  const [todos, setTodos] = useState([]);
  function add(event) {
    event.preventDefault();
    if (!text.trim()) return;
    const todo = {id: crypto.randomUUID(), text: text.trim()};
    setTodos(items => [...items, todo]); setText('');
  }
  return <main><form onSubmit={add}><label>Task <input value={text} onChange={e => setText(e.target.value)} /></label><button>Add</button></form>
    <p>{todos.length} tasks</p><ul>{todos.map(todo => <li key={todo.id}>{todo.text}<button onClick={() => setTodos(items => items.filter(t => t.id !== todo.id))}>Delete</button></li>)}</ul>
  </main>;
}

Apply this to your assignments

Complete your counter and likes/dislikes first, then controlled form/table and todo tasks. Sort a copied array from a radio choice. For checkboxes, add/remove values from a selected array. Test rapid consecutive clicks.

Your existing examples

• Display radio button value on check in React Component
• Display select box value in h1 in React Component
• Push text box value to an array display in list items in React Component
• Counter
• Likes and Dislikes button
• Component-state-ex2
• Controlled-comp-table single state
• Array rendering with sorting radio button
• Checkboxes
• Conditional rendering on radio button input
• Controlled-components
• Text-box data binding
• Controlled-comp-table
• Bind event handler with arguments as index for list item genereted from array in React Component
• Bind event handler with arguments as values for list item genereted from array in React Component
• Bind event handler with arguments as values for list item genereted from array of objects in React Component
• Todo list Component SetterCallback

Open the Examples tab to run or inspect these supplied projects. Their original links are preserved.

Open Assignments for your complete original worksheet and submission controls.

Common mistakes

Do not push into state or sort it in place. A setter is not a promise; awaiting it does not expose the next render’s value.

Check your understanding

1. Predict the output before running the example, then compare it with the result panel.
2. Explain which value each expression reads and which action changes it.
3. Try the boundary cases listed in the practice task and record what you observe.
4. Rebuild one matching assignment without copying, then compare behavior with the original example.

Reference

Official documentation for this topic · Vite setup requirements