Using props in JSX in React - Step-by-Step Execution

Concept Flow - Using props in JSX

Parent Component

↓

Pass props to Child

↓

Child Component receives props

↓

Use props inside JSX

↓

Render output with props values

The parent sends data as props to the child, which uses them inside JSX to render dynamic content.

Execution Sample

React

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

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

A Greeting component receives a name prop and shows it inside an h1 tag.

Execution Table

Step	Action	Props Received	JSX Rendered	Output
1	Parent calls <Greeting name="Alice" />	name: "Alice"	Hello, Alice!	<h1>Hello, Alice!</h1>
2	Greeting function runs with props	name: "Alice"	Hello, Alice!	<h1>Hello, Alice!</h1>
3	JSX evaluates {props.name}	name: "Alice"	Hello, Alice!	<h1>Hello, Alice!</h1>
4	React renders the h1 element	name: "Alice"	Hello, Alice!	Visible text: Hello, Alice!

💡 Rendering completes after JSX uses props to produce output.

Variable Tracker

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

Key Moments - 2 Insights

Why do we write {props.name} inside JSX?

Because JSX lets us embed JavaScript expressions inside curly braces to show dynamic values, as seen in execution_table step 3.

What happens if the parent does not pass the 'name' prop?

Then props.name is undefined, so the output would show 'Hello, undefined!', as props are received in step 2.

Visual Quiz - 3 Questions

Look at the execution table, what is the value of props.name at Step 2?

A "Alice"

B "Bob"

C undefined

D null

💡 Hint

Check the 'Props Received' column at Step 2 in the execution_table.

At which step does JSX evaluate the expression {props.name}?

A Step 1

B Step 4

C Step 3

D Step 2

💡 Hint

Look for the 'JSX Rendered' column describing JSX evaluation.

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

A props becomes undefined

B props.name changes to "Bob"

C No change in props.name

D props.name becomes null

💡 Hint

See how props.name updates in variable_tracker when props change.

Concept Snapshot

Using props in JSX:
- Parent passes data as props: <Component propName="value" />
- Child receives props as function argument
- Use props inside JSX with {props.propName}
- JSX renders dynamic content based on props
- Props are read-only inside child components

Full Transcript

In React, components can receive data from their parent components through props. The parent writes the component tag with attributes, like <Greeting name="Alice" />. The child component function receives these props as an object argument. Inside the JSX returned by the child, we use curly braces to embed JavaScript expressions, such as {props.name}, to show dynamic values. React then renders the JSX to the screen, showing the text with the passed-in name. If the parent changes the prop value, the child re-renders with the new data. Props are read-only and allow components to be reusable with different inputs.