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.