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.