Passing props to components in React - Cheat Sheet & Quick Revision

Recall & Review

beginner

What are props in React?

Props are inputs to React components. They are used to pass data from a parent component to a child component, like giving a gift to a friend.

beginner

How do you pass a prop named title with value "Hello" to a component Greeting?

You write: <Greeting title="Hello" />. This sends the value "Hello" to the Greeting component as a prop called title.

beginner

How does a functional component access props?

A functional component receives props as its first argument. For example: <code>function Greeting(props) { return &lt;h1&gt;{props.title}&lt;/h1&gt;; }</code>

intermediate

What happens if you don't pass a required prop to a component?

If a component expects a prop but you don't pass it, the prop will be undefined. This might cause errors or missing content unless you provide a default value.

beginner

Can props be changed inside a child component?

No, props are read-only inside the child component. They are like a gift you receive but cannot change. To change data, use state or callbacks.

How do you pass multiple props to a React component?

A <Component (name="John", age=30) />

B <Component props={{name: "John", age: 30}} />

C <Component name="John" age={30} />

D <Component>name="John" age={30}</Component>

You pass multiple props by listing them inside the component tag like <Component name="John" age={30} />.

Inside a functional component, how do you access a prop called color?

A getProp('color')

B this.color

C color()

D props.color

Props are accessed via the props object, so use props.color.

What is the correct way to provide a default value for a prop in a functional component?

A You cannot set default props in functional components

B Use default parameters: function Comp({ title = 'Hi' }) { ... }

C Use this.defaultProps = { title: 'Hi' }

D Set props.title = 'Hi' inside the component

You can use default parameters in the function signature to set default prop values.

Can a child component modify the props it receives?

A No, props are read-only

B Yes, props can be changed anytime

C Only if you use setState

D Only if props are passed as objects

Props are read-only and cannot be changed inside the child component.

Which of these is a valid way to pass a number prop called count with value 5?

A <Counter count={5} />

B <Counter count="5" />

C <Counter count='5' />

D <Counter count=(5) />

To pass a number, use curly braces: count={5}. Quotes pass strings.

Explain how props work in React and why they are important.

Think about how you give information to a friend to do something.

Describe how to pass and access multiple props in a functional React component.

Imagine sending a letter with several details and reading them inside.

Practice

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

easy

A. To handle user events like clicks

B. To store local state inside a component

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

D. To style components with CSS

Solution

1. Step 1: Understand the role of props

   Props are used to send data from one component to another, specifically from parent to child.

2. Step 2: Differentiate props from other React features

   State stores local data, events handle interactions, 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 C

4. Quick Check:

   Props = data passing [OK]

Hint: Props always send data down 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 pass a prop named title with value "Hello" to a component Header?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recall JSX prop syntax

   Props are passed like HTML attributes: name="value" or name={expression}.

2. Step 2: Check each option

   uses correct string syntax.

   misses quotes around string.

   uses invalid quotes.

   uses colon which is invalid in JSX.

3. Final Answer:

   <Header title="Hello" /> -> Option B

4. Quick Check:

   Props look like HTML attributes [OK]

Hint: Use quotes for string props in JSX [OK]

Common Mistakes:

• Omitting quotes for string values
• Using colons instead of equals
• Adding extra quotes around prop names

3. What will be rendered by this React component?

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

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

medium

A. Hello, Alice!

B. Hello, {props.name}!

C. Hello, name!

D. Error: props is undefined

Solution

1. Step 1: Understand how props are used inside the component

   The component receives props and accesses props.name to display the name.

2. Step 2: Check the usage of the component

   The component is called with name="Alice", so props.name is "Alice".

3. Final Answer:

   <h1>Hello, Alice!</h1> -> Option A

4. Quick Check:

   props.name = Alice [OK]

Hint: Props values replace placeholders inside JSX [OK]

Common Mistakes:

• Printing literal {props.name} instead of value
• Forgetting to pass the prop
• Assuming props is undefined

4. Identify the error in this code snippet:

function Welcome(props) {
  return <h2>Welcome, {props.user}!</h2>;
}

// Usage:
<Welcome user=John />

medium

A. Missing quotes around string prop value 'John'

B. Props object is not passed correctly

C. Component name should be lowercase

D. JSX tags are not closed properly

Solution

1. Step 1: Check the prop usage in JSX

   In JSX, string prop values must be quoted, e.g., user="John".

2. Step 2: Identify the error in usage

   The code uses user=John without quotes, causing a syntax error.

3. Final Answer:

   Missing quotes around string prop value 'John' -> Option A

4. Quick Check:

   String props need quotes [OK]

Hint: Always quote string props in JSX [OK]

Common Mistakes:

• Omitting quotes for string props
• Using lowercase component names
• Leaving JSX tags unclosed

5. Given this parent and child component code, what will be the output?

function Child({ message }) {
  return <p>Message: {message || 'No message'}</p>;
}

function Parent() {
  const msg = '';
  return <Child message={msg} />;
}

hard

A. Message:

B. Error: message prop missing

C. Message: undefined

D. Message: No message

Solution

1. Step 1: Analyze the prop value passed

   The parent passes msg which is an empty string '' as the message prop.

2. Step 2: Understand the child component's rendering logic

   The child uses {message || 'No message'}. Since empty string is falsy, it falls back to 'No message'.

3. Final Answer:

   <p>Message: No message</p> -> Option D

4. Quick Check:

   Falsy empty string triggers fallback [OK]

Hint: Falsy props like '' use fallback values in JSX [OK]

Common Mistakes:

• Assuming empty string is truthy
• Expecting empty string to display as is
• Thinking missing prop causes error here