Using props in JSX in React - Deep Dive

Overview - Using props in JSX

What is it?

Using props in JSX means passing information from a parent component to a child component in React. Props are like special inputs that let components receive data and behave differently. They help make components reusable and dynamic by changing what they show or do based on the data they get. JSX is the syntax React uses to write HTML-like code inside JavaScript.

Why it matters

Without props, components would be static and could not share or customize data easily. Props solve the problem of communication between components, making apps interactive and flexible. Imagine building a toy where each piece can change color or shape depending on instructions; props are those instructions. Without them, every component would have to be rewritten for every small change, making development slow and error-prone.

Where it fits

Before learning props, you should understand basic React components and JSX syntax. After mastering props, you can learn about state management, hooks, and component lifecycle to build more interactive apps. Props are a foundational concept that connects simple components to complex app structures.

Mental Model

Core Idea

Props are like parameters you pass to a function, but for components, letting them receive data and customize their output.

Think of it like...

Using props in JSX is like giving a recipe card to a chef; the card tells the chef what ingredients to use and how to prepare the dish, so the chef can make different meals from the same recipe.

Parent Component
   │
   ├── passes props ──▶ Child Component
   │                     └─ uses props to render UI
   │
   └── can pass different props each time

Props flow one-way: Parent → Child

Build-Up - 7 Steps

1

Foundation

What Are Props in React

Concept: Introduce the idea of props as inputs to components.

In React, components can receive data called props. Props are passed like attributes in HTML but inside JSX. For example, passes a prop named 'name' with value 'Alice' to the Greeting component.

Result

The Greeting component can use the 'name' prop to show 'Hello, Alice!' on the screen.

Understanding props as inputs helps you see components as reusable pieces that can change based on the data they get.

2

Foundation

Accessing Props Inside Components

Concept: How to read and use props inside a functional component.

Props are received as a function argument in functional components. For example: function Greeting(props) { return

Hello, {props.name}!

; } Here, props.name accesses the value passed from the parent.

Result

The component renders a personalized greeting using the passed prop.

Knowing that props are just an object lets you access any data passed from the parent, making components flexible.

3

Intermediate

Passing Multiple Props and Different Types

🤔Before reading on: do you think props can only be strings, or can they be other types like numbers or functions? Commit to your answer.

Concept: Props can be any JavaScript value, not just strings.

You can pass numbers, booleans, arrays, objects, or even functions as props. For example: alert('Clicked!')} /> Inside the component, you use these props just like any other variable.

Result

The child component can behave differently based on the type and value of each prop.

Understanding that props accept any data type unlocks powerful ways to customize component behavior.

4

Intermediate

Default Props and Prop Validation

🤔Before reading on: do you think React automatically checks if props are missing or wrong type? Commit to your answer.

Concept: React allows setting default values for props and validating their types to catch errors early.

You can set default props by assigning default values in the function parameters or using defaultProps. Also, libraries like PropTypes help check prop types during development to avoid bugs.

Result

Components behave predictably even if some props are missing or incorrect.

Knowing how to provide defaults and validate props prevents common bugs and improves code quality.

5

Intermediate

Props Are Read-Only and One-Way

🤔Before reading on: can a child component change the props it receives? Commit to your answer.

Concept: Props flow only from parent to child and cannot be changed by the child component.

Props are immutable inside the child. If a child needs to change data, it should use state or communicate back to the parent via callbacks passed as props.

Result

This one-way data flow keeps apps predictable and easier to debug.

Understanding props immutability clarifies why state exists and how data flows in React.

6

Advanced

Destructuring Props for Cleaner Code

🤔Before reading on: do you think accessing props with destructuring changes how props work? Commit to your answer.

Concept: Destructuring props is a syntax shortcut to extract values directly from the props object.

Instead of writing function Greeting(props) { return

{props.name}

; }, you can write function Greeting({ name }) { return

{name}

; } This makes code cleaner and easier to read.

Result

Code becomes shorter and more readable without changing functionality.

Knowing destructuring improves code clarity and is a common pattern in professional React codebases.

7

Expert

Props and React Reconciliation Performance

🤔Before reading on: do you think passing new props always causes React to re-render the child component? Commit to your answer.

Concept: React re-renders components when props change, but understanding how React compares props helps optimize performance.

React uses shallow comparison for props. If a new object or function is passed each time, React treats it as changed and re-renders. Memoization techniques like React.memo or useCallback help prevent unnecessary renders by keeping props stable.

Result

Optimized apps avoid slowdowns caused by needless re-rendering.

Understanding how props affect rendering helps write high-performance React apps and avoid subtle bugs.

Under the Hood

When a React component is called, the props object is passed as an argument. React uses this object to determine what to render. During reconciliation, React compares the new props with the previous ones using shallow equality. If props differ, React updates the component's output in the virtual DOM and then updates the real DOM efficiently. Props are immutable inside the component, ensuring predictable rendering behavior.

Why designed this way?

Props were designed as immutable inputs to keep components pure and predictable. This one-way data flow simplifies debugging and reasoning about UI changes. Alternatives like two-way binding were avoided to reduce complexity and bugs. The design encourages clear separation between data input (props) and internal state, making apps easier to maintain and optimize.

┌───────────────┐       ┌───────────────┐
│ Parent        │       │ Child         │
│ Component     │──────▶│ Component     │
│ (creates JSX) │ props │ (receives     │
└───────────────┘       │ props object) │
                        └───────────────┘

React compares props during updates:
Previous props ──▶ shallow compare ──▶ New props
If different → re-render child component

Myth Busters - 4 Common Misconceptions

Quick: Can a child component modify the props it receives? Commit to yes or no.

Common Belief: Props can be changed inside the child component to update the UI.

Reality: Props are read-only inside the child component and cannot be modified.

Why it matters: Trying to change props inside a child leads to bugs and unpredictable UI behavior.

Quick: Are props only strings or can they be other types? Commit to your answer.

Common Belief: Props must be strings because JSX looks like HTML attributes.

Reality: Props can be any JavaScript value: numbers, booleans, objects, arrays, or functions.

Why it matters: Limiting props to strings restricts component flexibility and leads to awkward workarounds.

Quick: Does React always re-render a child component when props are passed? Commit to yes or no.

Common Belief: Passing props always causes the child component to re-render.

Reality: React re-renders only if props have changed based on shallow comparison; stable props prevent unnecessary renders.

Why it matters: Misunderstanding this causes performance issues and inefficient apps.

Quick: Does React automatically check prop types and provide defaults? Commit to yes or no.

Common Belief: React enforces prop types and default values automatically.

Reality: React does not enforce prop types or defaults by itself; developers must add PropTypes or default values manually.

Why it matters: Assuming automatic checks can lead to runtime errors and harder-to-find bugs.

Expert Zone

1

Passing inline functions as props creates new references each render, causing child re-renders unless memoized.

2

Destructuring props in the function signature improves readability but does not affect performance or behavior.

3

React.memo only shallowly compares props; deep objects require custom comparison to avoid unnecessary renders.

When NOT to use

Props are not suitable for managing data that changes inside a component; use state or context instead. For global or deeply nested data, consider React Context or state management libraries like Redux.

Production Patterns

In production, props are often combined with hooks and context to build scalable apps. Developers use PropTypes or TypeScript for type safety. Memoization patterns like React.memo and useCallback optimize rendering. Passing callbacks as props enables child-to-parent communication.

Connections

Function Parameters

Props in React components are like parameters passed to functions.

Understanding function parameters helps grasp how props deliver data to components, making React components behave like reusable functions.

Immutable Data Structures

Props are immutable inside components, similar to immutable data patterns.

Knowing immutability principles clarifies why props cannot be changed and how this leads to predictable UI updates.

Supply Chain Management

Props flow one-way from parent to child like goods moving down a supply chain.

Seeing props as a one-way delivery system helps understand data flow and why reverse changes require callbacks or state.

Common Pitfalls

#1 Trying to modify props inside a child component.

Wrong approach:

function Child(props) {
props.name = 'Changed'; // wrong
return {props.name};
}

Correct approach:

function Child(props) {
const [name, setName] = React.useState(props.name);
// use state to change name
return {name};
}

Root cause:

Misunderstanding that props are immutable and confusing them with state.

#2 Passing new objects or functions inline causing unnecessary re-renders.

Wrong approach:

doSomething()} />

Correct approach:

const handleClick = React.useCallback(() => doSomething(), []);

Root cause:

Not realizing that inline functions create new references each render, triggering React to re-render children.

#3 Assuming React automatically checks prop types and provides defaults.

Wrong approach:

function Button(props) {
return ;
}
// No default or type check

Correct approach:

Button.defaultProps = { disabled: false };
Button.propTypes = { disabled: PropTypes.bool, label: PropTypes.string.isRequired };

Root cause:

Believing React enforces prop validation and defaults without explicit code.

Key Takeaways

Props are the way React components receive data from their parents, making components reusable and dynamic.

Props are read-only and flow one-way from parent to child, ensuring predictable UI updates.

Props can be any JavaScript value, not just strings, allowing flexible component customization.

Understanding how React compares props helps optimize rendering and improve app performance.

Using default props and prop validation prevents bugs and improves code quality in React applications.

Practice

1. What is the main purpose of props in React components?

easy

A. To handle user events like clicks

B. To store internal state within a component

C. To style components with CSS

D. To pass data from a parent component to a child component

Solution

1. Step 1: Understand the role of props

   Props are used to send data from a parent component to a child component in React.

2. Step 2: Differentiate props from other concepts

   State stores internal data, events handle user actions, and CSS styles components, but props specifically pass data down.

3. Final Answer:

   To pass data from a parent component to a child component -> Option D

4. Quick Check:

   Props = Data passing [OK]

Hint: Props always send data from parent to child [OK]

Common Mistakes:

• Confusing props with state
• Thinking props handle events
• Believing props style components

2. Which of the following is the correct way to use a prop named title inside JSX?

easy

A. <h1>title</h1>

B. <h1>{title}</h1>

C. <h1>{props.title}</h1>

D. <h1>$title</h1>

Solution

1. Step 1: Use curly braces to embed prop values in JSX

   In JSX, to show a prop value, you wrap the prop access in curly braces like {props.title}.

2. Step 2: Understand context of prop usage

   The props object is passed to the component function, so access via {props.title}. Using {title} requires destructuring like function Comp({title}).

3. Final Answer:

   <h1>{props.title}</h1> -> Option C

4. Quick Check:

   Curly braces show prop values [OK]

Hint: Use curly braces { } to show props in JSX [OK]

Common Mistakes:

• Writing prop name as plain text without braces
• Using $ sign like in other languages
• Using {title} without destructuring the props object

3. Given the component:

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

// Usage:
<Greeting name="Alice" />

What will be rendered on the screen?

medium

A. Hello, {name}!

B. Hello, Alice!

C. Hello, props.name!

D. SyntaxError

Solution

1. Step 1: Identify how props are passed and used

   The Greeting component receives a prop called name with value "Alice".

2. Step 2: Understand JSX rendering with props

   The JSX uses {props.name} which inserts the string "Alice" inside the <h2> tag.

3. Final Answer:

   <h2>Hello, Alice!</h2> -> Option B

4. Quick Check:

   props.name = Alice [OK]

Hint: Props values appear inside curly braces in JSX output [OK]

Common Mistakes:

• Expecting literal text {name} instead of value
• Confusing props.name with string 'props.name'
• Thinking this causes syntax error

4. What is wrong with this React component code?

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

medium

A. props.name should be inside curly braces to render its value

B. Function name should be lowercase

C. Missing return statement

D. JSX tags must be self-closing

Solution

1. Step 1: Check how props are used inside JSX

   The code writes props.name as plain text inside JSX, so it will render literally instead of the prop value.

2. Step 2: Correct usage of props in JSX

   To show the value of props.name, it must be wrapped in curly braces like {props.name}.

3. Final Answer:

   props.name should be inside curly braces to render its value -> Option A

4. Quick Check:

   Use {props.name} to show prop value [OK]

Hint: Always wrap props in { } inside JSX [OK]

Common Mistakes:

• Writing props.name as plain text
• Thinking function names must be lowercase
• Confusing JSX self-closing rules

5. You want to create a reusable Button component that shows different text based on a label prop. Which code correctly uses props to achieve this?

function Button(props) {
  return <button>???</button>;
}

Choose the correct replacement for ???.

hard

A. {props.label}

B. {label}

C. "props.label"

D. label

Solution

1. Step 1: Understand how to access props inside the component

   The component receives props as an object, so the label prop is accessed as props.label.

2. Step 2: Use curly braces to embed the prop value in JSX

   To show the value inside JSX, wrap props.label in curly braces: {props.label}.

3. Final Answer:

   {props.label} -> Option A

4. Quick Check:

   Use {props.propName} to show prop value [OK]

Hint: Use {props.propName} inside JSX to show prop values [OK]

Common Mistakes:

• Using prop name without braces
• Using braces without props object
• Using quotes around prop name