Reusability with props

Reuse behavior while keeping state ownership deliberate.

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

Two instances of a component share its definition, not its state. This is why reusable counters and multiple todo lists can operate independently. Configuration belongs in props: title, initial value, step or image records. An initial value normally only initializes state on the first mount.

For a carousel, store an index, derive the current item from the items prop and wrap the index using modulo. Handle an empty array before reading an item. For synchronized counters, lift state to their common parent instead of trying to make two local states mirror each other.

Data / props ↓ JavaScript expression ↓ JSX elements ↓ Visible 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';
function Counter({title, step = 1}) {
  const [count, setCount] = useState(0);
  return <section><h2>{title}: {count}</h2><button onClick={() => setCount(n => n + step)}>Add {step}</button></section>;
}
export default function App() {
  return <main><Counter title="Likes" /><Counter title="Practice points" step={5} /></main>;
}

Apply this to your assignments

Build your reusable counters, two todo lists and galleries. Extend a gallery with Previous/Next, disabled controls for no images, and wrap-around behavior. Check that deleting a task in one list leaves the other unchanged.

Your existing examples

• Reusable carousal component
• Reusable counters component

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

Open Assignments for your complete original worksheet. Use the assignment workspace link to submit completed work.

Common mistakes

Do not define the reusable component inside App. Document whether an initial-value prop resets state or only initializes it.

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