What are props in React - Visual Explanation

Concept Flow - What are props

Parent Component

↓

Pass props to Child

↓

Child Component receives props

↓

Child uses props to render

↓

Display output with props data

Props flow from a parent component to a child component, allowing the child to use data passed down for rendering.

Execution Sample

React

function Greeting(props) {
  return <h1>Hello, {props.name}!</h1>;
}

ReactDOM.render(<Greeting name="Alice" />, document.getElementById('root'));

This code shows a Greeting component receiving a name prop and displaying it.

Execution Table

Step	Action	Props Value	Rendered Output
1	Parent calls <Greeting name="Alice" />	{"name": "Alice"}	No output yet
2	Greeting function runs with props	{"name": "Alice"}	Evaluates <h1>Hello, Alice!</h1>
3	React renders the element	{"name": "Alice"}	Displays: Hello, Alice!

💡 Rendering completes with props used to show personalized greeting.

Variable Tracker

Variable	Start	After Step 1	After Step 2	Final
props	undefined	{"name": "Alice"}	{"name": "Alice"}	{"name": "Alice"}

Key Moments - 2 Insights

Why does the child component receive props as a parameter?

Because React passes the props object to the child component function when it is called, as shown in step 2 of the execution_table.

Can the child component change the props it receives?

No, props are read-only inside the child component. They come from the parent and should not be modified, as seen in the variable_tracker where props remain constant.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of props at Step 2?

A {"name": "Alice"}

B undefined

C "Alice"

D {}

💡 Hint

Check the Props Value column at Step 2 in the execution_table.

At which step does React render the greeting message?

A Step 1

B Step 2

C Step 3

D After Step 3

💡 Hint

Look at the Rendered Output column in the execution_table.

If the parent changes name to "Bob", what changes in the variable_tracker?

A props remains {"name": "Alice"}

B props changes to {"name": "Bob"} after Step 1

C props becomes undefined

D props becomes an empty object

💡 Hint

Props come from the parent, so changing parent input updates props as shown in variable_tracker.

Concept Snapshot

Props are inputs passed from parent to child components in React.
They are read-only objects received as function parameters.
Props let children display dynamic data from parents.
Syntax: <Child propName={value} /> and function Child(props) { ... }.
Props flow down only; children cannot modify them.

Full Transcript

In React, props are like packages of information sent from a parent component to a child component. The parent includes props as attributes when calling the child, for example <Greeting name="Alice" />. The child component receives these props as a parameter, usually named props, and uses them to decide what to show. In the example, the Greeting component uses props.name to display Hello, Alice!. Props are read-only, meaning the child cannot change them. React renders the child component using the props data, producing the final output on the screen. This flow helps components stay simple and reusable by receiving data from outside.