Passing Props to Components

Two students share the same report layout but have different names and marks. Duplicating the layout makes it harder to apply the same correction to both reports. Props supply the changing information to one reusable component.

Props are values a parent passes to a child component through JSX attributes. A child reads them from its props argument, commonly using destructuring. Props can contain strings, numbers, objects, functions or elements.

Explain
Pass named student values from a parent to a child.
Trace
Explain why a child treats its props as read-only inputs.
Apply
Choose an explicit default for a missing optional input.

Props: follow the relationship

Parent owns data
App holds the school’s student record.
Pass named props
The parent supplies student values to a report component.
Child describes UI
The report reads those inputs and returns the student summary.

Read this relationship alongside the complete code. This diagram explains the flow; it does not execute React.

Build the mental model

The parent chooses the inputs; the child calculates a description from those inputs. The report definition stays the same for Asha and Ravi. A default value can handle an omitted prop, but it does not override an explicit null value.

Defaults and the component contract

A useful component contract identifies required inputs and sensible fallback values. A missing mark can mean unrecorded rather than zero, so a default of zero must match the real application rule. The demonstration uses a numeric fallback only to show JavaScript default-parameter behavior.

Passing an object is convenient when several fields belong to one student, but passing a few explicit props can make a small component easier to read. Choose the shape according to responsibility. Neither form authorizes the child to modify information owned by its parent.

Read the complete React example

StudentReport destructures name and marks. App supplies a string name and a numeric mark with braces. Writing marks="75" would supply a string instead, which could cause unexpected results if the report later performed addition.

React · JavaScript with JSX

import React from 'react';
function StudentReport({ name, marks = 0 }) {
  return <article><h2>{name}</h2><p>Marks: {marks}</p></article>;
}
export default function App() {
  return <main><StudentReport name="Asha" marks={75} /><StudentReport name="Ravi" marks={68} /></main>;
}

Expected screen and behavior

Initial screen: Asha Marks: 75 Ravi Marks: 68

Connect the source to the screen

React · main example

import React from 'react';
function StudentReport({ name, marks = 0 }) {
  return <article><h2>{name}</h2><p>Marks: {marks}</p></article>;
}
export default function App() {
  return <main><StudentReport name="Asha" marks={75} /><StudentReport name="Ravi" marks={68} /></main>;
}

React passes a new set of props when the parent renders with changed values. The child should treat its received props as read-only. If a user needs to change a parent-owned value, the parent can pass a callback that requests that change.

Avoid the common mistakes

Do not assign to marks inside the child to update the report. Such mutation does not establish React state and breaks the parent-child contract. Choose prop names that state their meaning; passing total and maximum is clearer than passing loosely named value1 and value2.

Practice before reading the solution

React · starting example

import React from 'react';
function StudentReport({ name, marks = 0 }) {
  return <article><h2>{name}</h2><p>Marks: {marks}</p></article>;
}
export default function App() {
  return <main><StudentReport name="Asha" marks={75} /><StudentReport name="Ravi" marks={68} /></main>;
}

Create a report accepting a student name and two subject marks.

Predict the initial visible text and explain which values determine it. Then inspect the worked solution below. Change one relevant input in your local project and check whether the screen follows your prediction. A working screen should be checked for the intended meaning, not merely the absence of an error.

Worked practice solution

The worked component calculates its total directly from the supplied marks. There is no reason to duplicate that total in state because it can be obtained from the current inputs on every render. A later lesson explains how state adds changeable memory.

React · JavaScript with JSX

import React from 'react';
function StudentReport({ name, maths, science }) {
  return <article><h2>{name}</h2><p>Total: {maths + science}</p></article>;
}
export default function App() {
  return <main><StudentReport name="Asha" maths={40} science={35} /></main>;
}

Expected screen and behavior

Initial screen: Asha Total: 75

Choose the explanation that matches React and JavaScript behavior. Review the reasoning for each alternative before moving on.

Use the idea in the next lesson

Props are values a parent passes to a child component through JSX attributes. A child reads them from its props argument, commonly using destructuring. Props can contain strings, numbers, objects, functions or elements.

Continue with Children and Named Slots. Revisit Styling React Components when the relationship between inputs and the resulting screen needs another look.

Read the primary reference: React documentation on Passing Props to Components.

Reaching the recap and completing the quizzes are separate milestones.

Next lesson: Children and Named Slots →

Passing Props to Components