Pass data down and pass callbacks for actions.

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

Props are inputs chosen by the parent. Treat them as read-only. Destructuring makes the component’s contract visible: a list expects a title and records; a gallery expects image records. The same component can show unrelated data without copying its markup.

When a child interaction must change parent state, pass a callback prop. Calling it reports what happened; the parent decides how to update. A key helps React identify siblings but is not delivered as a normal prop, so pass id separately when the child needs it.

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

function NameList({title, names}) {
  return <section><h2>{title}</h2><ul>{names.map(name => <li key={name}>{name}</li>)}</ul></section>;
}
export default function App() {
  return <main><NameList title="Morning batch" names={['Asha', 'Ravi']} /><NameList title="Evening batch" names={['Meena', 'Kiran']} /></main>;
}

Apply this to your assignments

Use your multiple-list and gallery examples to define prop contracts. Change the sample to records with IDs if names can repeat. Add onSelect(id) for the component communication exercise.

Your existing examples

• 1.Multiple List Genration live
• Proj-comp-prop-galleries
• Props in react
• CompComm

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 mutate a prop array or copy props into state without a clear reason. Parent updates already provide new props.

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