Props as read-only data in React - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What happens when a child component tries to modify props directly?

Consider a React functional component receiving props. What will happen if the component tries to change a prop value directly inside its body?

React

function Child({ count }) {
  count = count + 1;
  return <p>{count}</p>;
}

A The component will render with the incremented count, but the parent prop remains unchanged.

B React will throw a runtime error because props are immutable.

C The parent component's state will update automatically to reflect the change.

D The component will ignore the change and render the original prop value.

💡 Hint

Think about how JavaScript variables and React props work inside a function.

Props are read-only, but assigning a new value to the prop variable inside the component only changes the local copy. It does not affect the parent or cause errors. The component renders with the new local value.

❓ state_output

intermediate

What is the output when trying to mutate props inside useEffect?

Look at this React component. What will it display after mounting?

React

function Example({ message }) {
  React.useEffect(() => {
    message = 'Changed';
  }, []);
  return <p>{message}</p>;
}

A An error is thrown because props cannot be changed inside useEffect.

B <p>Changed</p>

C <p>Original message passed as prop (unchanged)</p>

D Nothing is rendered because the component crashes.

💡 Hint

Remember that props are read-only and reassigning them inside effects does not update state or cause re-render.

Reassigning the prop variable inside useEffect only changes the local variable. It does not update the component's state or cause a re-render. So the original prop value is rendered.

📝 Syntax

advanced

Which option correctly prevents prop mutation in a child component?

You want to ensure a child component does not accidentally mutate props. Which code snippet correctly enforces this?

A

function Child(props) {
  const newProps = { ...props, value: 10 };
  return <p>{newProps.value}</p>;
}

B

function Child(props) {
  props.value = 10;
  return <p>{props.value}</p>;
}

C

function Child({ value }) {
  value = 10;
  return <p>{value}</p>;
}

D

function Child(props) {
  Object.freeze(props);
  props.value = 10;
  return <p>{props.value}</p>;
}

💡 Hint

Think about how to make an object immutable in JavaScript.

Using Object.freeze(props) prevents any changes to the props object. Attempting to assign a new value to a prop will fail silently or throw in strict mode. Other options either mutate props directly or create new variables.

🔧 Debug

advanced

Why does this code cause unexpected behavior when modifying props?

Examine this React component. Why does changing props.data.name inside the component cause bugs?

React

function Profile(props) {
  props.data.name = 'New Name';
  return <p>{props.data.name}</p>;
}

A Props are shallowly immutable; mutating nested objects causes side effects outside the component.

B React automatically clones props, so changes inside the component do not affect the parent.

C This code throws a TypeError because nested props cannot be changed.

D The component will not render because props are frozen by default.

💡 Hint

Consider how JavaScript objects and React props work together.

Props are immutable only at the top level. Nested objects inside props can be changed, which mutates the original object and causes bugs because the parent component's data changes unexpectedly.

🧠 Conceptual

expert

Why is treating props as read-only important in React?

Choose the best explanation for why React components must treat props as read-only data.

A Because props are only used for styling and cannot hold dynamic data.

B Because React relies on props immutability to detect changes and optimize rendering efficiently.

C Because modifying props directly causes React to automatically reset the component state.

D Because props are stored in a special read-only memory area by the browser.

💡 Hint

Think about how React decides when to update components.

React uses props immutability to detect changes via shallow comparison. If props are mutated directly, React may not detect changes properly, leading to bugs and inefficient rendering.

Practice

1. In React, what does it mean that props are read-only?

easy

A. You cannot change props inside the child component.

B. You can modify props directly in the child component.

C. props are only used for styling components.

D. props are used to store component state.

Solution

1. Step 1: Understand the role of props

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

2. Step 2: Recognize props immutability

   Props are read-only, meaning the child component cannot change them directly.

3. Final Answer:

   You cannot change props inside the child component. -> Option A

4. Quick Check:

   Props are read-only = D [OK]

Hint: Remember: props come from parent, child can't change them [OK]

Common Mistakes:

• Trying to modify props directly inside child component
• Confusing props with state
• Thinking props are for styling only

2. Which of the following is the correct way to access a prop named title inside a functional component?

easy

A. const title = this.props.title;

B. const title = getProps.title;

C. const title = state.title;

D. const title = props.title;

Solution

1. Step 1: Identify functional component syntax

   In functional components, props are passed as a parameter named props.

2. Step 2: Access prop correctly

   You access a prop by props.title. Using this.props is for class components.

3. Final Answer:

   const title = props.title; -> Option D

4. Quick Check:

   Functional component props access = B [OK]

Hint: Use props.parameterName inside functional components [OK]

Common Mistakes:

• Using this.props in functional components
• Confusing state with props
• Trying to use undefined variables like getProps

3. What will be the output of this React component?

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

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

medium

A. Hello, Bob!

B. Hello, Alice!

C. Error: Cannot assign to props.name

D. Hello, undefined!

Solution

1. Step 1: Understand props mutability

   Although props are read-only and mutating them is an anti-pattern, JavaScript allows changing the object property within the component function.

2. Step 2: Determine rendered output

   The assignment props.name = "Alice" mutates the value before the return, so the output is "Hello, Alice!".

3. Final Answer:

   Hello, Alice! -> Option B

4. Quick Check:

   Props mutation affects render output = B [OK]

Hint: Mutating props technically works but violates React's read-only principle [OK]

Common Mistakes:

• Thinking props mutation doesn't affect output
• Expecting an error from assignment
• Confusing props with state

4. Identify the error in this React functional component:

function Counter(props) {
  props.count = props.count + 1;
  return <div>Count: {props.count}</div>;
}

medium

A. Props are being mutated directly, which is not allowed.

B. The component should use this.state instead of props.

C. The return statement is missing parentheses.

D. The component should not return JSX.

Solution

1. Step 1: Check for props mutation

   The line props.count = props.count + 1; tries to change props directly, which is not allowed.

2. Step 2: Understand correct data handling

   Props are read-only; to change data, use state or callbacks, not direct mutation.

3. Final Answer:

   Props are being mutated directly, which is not allowed. -> Option A

4. Quick Check:

   Direct props mutation = error = A [OK]

Hint: Never assign to props; use state for changes [OK]

Common Mistakes:

• Trying to mutate props directly
• Confusing props with state usage
• Ignoring React's immutability rules

5. You want to create a component that shows a user's name and allows updating it inside the component. Which approach correctly respects that props are read-only?

hard

A. Modify the props.name directly inside the component to update the name.

B. Use a global variable to store the name and ignore props.

C. Copy props.name to a state variable and update the state to change the name.

D. Pass a new name prop from the child component to the parent.

Solution

1. Step 1: Understand props immutability

   Props cannot be changed inside the component; they are read-only.

2. Step 2: Use state for data that changes

   Copy the prop value to a state variable, then update the state to reflect changes.

3. Final Answer:

   Copy props.name to a state variable and update the state to change the name. -> Option C

4. Quick Check:

   Use state to update data, not props = C [OK]

Hint: Use state for changes, keep props read-only [OK]

Common Mistakes:

• Trying to change props directly
• Using global variables instead of state
• Passing props from child to parent (not possible)