What are props in React - Practice Questions & Exercises

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding Props in React Components

In React, what are props used for in functional components?

A To directly modify the DOM elements

B To pass data from a parent component to a child component

C To store local state inside a component

D To handle side effects like data fetching

💡 Hint

Think about how components share information in React.

Props are short for properties. They let a parent component send data to a child component. This helps components stay reusable and organized.

❓ component_behavior

intermediate

Props Usage in a Functional Component

What will be the output of this React component when rendered?

function Greeting(props) {
  return 
Hello, {props.name}!
;
}

// Rendered as: 

A <h1>Hello, {name}!</h1>

B Error: props is undefined

C <h1>Hello, !</h1>

D <h1>Hello, Alice!</h1>

💡 Hint

Look at how the prop 'name' is accessed inside the component.

The component receives a prop called name with value "Alice". It uses props.name to display it inside the <h1> tag.

📝 Syntax

advanced

Correct Syntax for Destructuring Props

Which option shows the correct way to use destructuring to access props in a React functional component?

React

function Welcome(____) {
  return <p>Welcome, {name}!</p>;
}

A { name }

B (name)

C [name]

D props.name

💡 Hint

Destructuring props means extracting values inside the parentheses.

Destructuring props means writing { name } inside the function parameters to directly access the name prop.

❓ state_output

advanced

Props vs State Behavior

Given this React component, what will be the output after clicking the button?

function Counter({ initial }) {
  const [count, setCount] = React.useState(initial);
  return (
    <>
      
Count: {count}
      
    
  );
}

// Rendered as: 

A Count: 5 initially, then increases by 1 each click

B Count: 5 initially, but does not change on click

C Count: 0 initially, then increases by 1 each click

D Error: Cannot read property 'initial' of undefined

💡 Hint

Look at how state is initialized and updated on button click.

The state count starts at the initial prop value 5. Clicking the button increases count by 1 each time.

🔧 Debug

expert

Why Does This Prop Not Update?

Consider this React component:

function Display({ message }) {
  React.useEffect(() => {
    console.log('Message:', message);
  }, []);
  return 
{message}
;
}

// Parent renders:  and updates 'text' over time

Why does the console.log not show updated messages when 'text' changes?

A Because the component does not receive props correctly

B Because props cannot change after initial render

C Because the useEffect dependency array is empty, so it runs only once

D Because console.log cannot show updated values inside useEffect

💡 Hint

Think about how useEffect dependencies control when the effect runs.

The empty dependency array [] means the effect runs only once after the first render. It does not run again when props change.

Practice

1. What are props in React?

easy

A. Data passed from a parent component to a child component

B. A way to store component state internally

C. Functions that update the component's state

D. A method to style components

Solution

1. Step 1: Understand the role of props

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

2. Step 2: Differentiate props from state and methods

   Props are not for storing state or styling; they are inputs like function arguments.

3. Final Answer:

   Data passed from a parent component to a child component -> Option A

4. Quick Check:

   Props = Parent to child data [OK]

Hint: Props are like function arguments passed down [OK]

Common Mistakes:

• Confusing props with state
• Thinking props change inside the child
• Believing props are used for styling

2. Which of the following is the correct way to pass a prop named title with value "Hello" to a component Greeting?

easy

A.

B.

C.

D.

Solution

1. Step 1: Recognize JSX prop syntax

   Props are passed as attributes with key-value pairs inside JSX tags, using quotes for strings.

2. Step 2: Check each option's syntax

   correctly uses title="Hello". misses the key, C uses unquoted value, D misses quotes.

3. Final Answer:

   <Greeting title="Hello" /> -> Option D

4. Quick Check:

   Props syntax = key="value" [OK]

Hint: Props look like HTML attributes with quotes [OK]

Common Mistakes:

• Omitting the prop name
• Not quoting string values
• Using curly braces without variables

3. Given this component:

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

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

What will be rendered on the screen?

medium

A. Hello, props.name!

B. Hello, !

C. Hello, Alice!

D. Error: props is undefined

Solution

1. Step 1: Identify how props are used in the component

   The component uses props.name inside JSX to display the passed name.

2. Step 2: Check the usage of the component

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

3. Final Answer:

   Hello, Alice! -> Option C

4. Quick Check:

   props.name = Alice [OK]

Hint: Props values appear where you use {props.key} [OK]

Common Mistakes:

• Printing the literal string 'props.name'
• Forgetting to pass the prop
• Assuming props is undefined

4. What is wrong with this React component usage?

function Message(props) {
  return <p>{props.text}</p>;
}

// Usage:
<Message text=Hello />

medium

A. The function should return a string, not JSX

B. The prop value Hello should be in quotes

C. Props cannot be used inside <p> tags

D. The component name should be lowercase

Solution

1. Step 1: Check the prop syntax in usage

   The prop text=Hello is missing quotes around the string value.

2. Step 2: Recall JSX rules for string props

   String props must be quoted like text="Hello" or wrapped in curly braces if a variable.

3. Final Answer:

   The prop value Hello should be in quotes -> Option B

4. Quick Check:

   String props need quotes [OK]

Hint: Always quote string props in JSX [OK]

Common Mistakes:

• Leaving string props unquoted
• Using lowercase component names
• Misunderstanding JSX return types

5. You want to create a reusable Button component that shows different labels based on props. Which approach correctly uses props to achieve this?

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

// Usage:
<Button label="Save" />
<Button label="Cancel" />

hard

A. This approach works because props.label changes the button text dynamically

B. This approach is wrong because props cannot be used inside button tags

C. You must use state instead of props to change button labels

D. Button labels must be hardcoded inside the component

Solution

1. Step 1: Understand props usage for dynamic content

   Props allow passing different values to the same component to show varied content.

2. Step 2: Verify the example usage

   The Button component uses props.label inside the button, and different labels are passed in usage.

3. Final Answer:

   This approach works because props.label changes the button text dynamically -> Option A

4. Quick Check:

   Props enable reusable components [OK]

Hint: Use props to customize component content easily [OK]

Common Mistakes:

• Thinking props can't change displayed text
• Confusing props with state for static labels
• Hardcoding values inside components