Props as read-only data in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to access the prop name inside the component.

React

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

Drag options to blanks, or click blank then click option'

Aname

Bstate

CsetName

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to modify props directly inside the component.

Using state instead of props to access data.

The props object contains the data passed to the component. To read the name prop, use props.name.

2fill in blank

medium

Complete the code to pass a prop called age with value 30 to the User component.

React

<User [1]={30} />

Drag options to blanks, or click blank then click option'

Astate

BsetAge

Cage

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using state or setAge instead of the prop name.

Passing props without curly braces for numbers.

Props are passed as attributes to components. To pass an age prop, write age={30}.

3fill in blank

hard

Fix the error in the code by completing the blank to prevent modifying props directly.

React

function Counter(props) {
  // Incorrect: props.count = props.count + 1;
  const newCount = props.[1] + 1;
  return <p>{newCount}</p>;
}

Drag options to blanks, or click blank then click option'

Acount

BsetCount

CupdateCount

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to assign a new value to props.count directly.

Using state or setter names instead of the prop name.

Props are read-only. You can read props.count but must not assign to it. Instead, calculate a new value without changing props.

4fill in blank

hard

Fill both blanks to correctly destructure props and use the title prop inside the component.

React

function Header([1]) {
  return <h2>{ [2] }</h2>;
}

Drag options to blanks, or click blank then click option'

Atitle

Bprops

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Using state instead of props.

Writing {props} which doesn't destructure individual props correctly.

Not matching the destructured variable with the used variable.

Destructuring extracts individual props into function parameters. Write function Header({title}) and use {title} directly in JSX. Both blanks are title.

5fill in blank

hard

Fill all three blanks to create a component that receives firstName and lastName props and displays the full name.

React

function FullName([1], [2]) {
  return <p>{ [3] + ' ' + [2] }</p>;
}

Drag options to blanks, or click blank then click option'

AfirstName

BlastName

CfullName

Dname

Attempts:

3 left

💡 Hint

Common Mistakes

Using a single object parameter instead of destructuring.

Mixing up prop names or using undefined variables.

The component destructures firstName and lastName from props. Then it uses them to display the full name. The first and third blanks are firstName, the second is lastName.

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)