Passing props to components in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a prop named title with value "Hello" to the Header component.

React

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

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

Atitle="Hello"

Btext="Hello"

Cname="Hello"

Dcontent="Hello"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong prop name like 'text' or 'name' instead of 'title'.

Forgetting to add quotes around the string value.

The prop name must match the expected prop in the component. Here, title is the correct prop name.

2fill in blank

medium

Complete the code to access the message prop inside the Greeting component.

React

function Greeting(props) {
  return <p>{props.[1]</p>;
}

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

Acontent

Btext

Cmessage

Dtitle

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name than what was passed.

Trying to access props without the props. prefix.

Props are accessed via props.propName. Here, the prop is named message.

3fill in blank

hard

Fix the error in the code by completing the destructuring of props in the Info component.

React

function Info([1]) {
  return <div>{name} is {age} years old.</div>;
}

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

Aprops

B{name, age}

Cname, age

Dinfo

Attempts:

3 left

💡 Hint

Common Mistakes

Not using curly braces for destructuring.

Using a single variable name instead of destructuring.

Destructuring props requires curly braces around the prop names inside the function parameter.

4fill in blank

hard

Fill both blanks to pass color and size props to the Button component.

React

function App() {
  return <Button [1] [2] />;
}

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

Acolor="blue"

Bsize="large"

Cstyle="blue"

Dfont="large"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop names like 'style' or 'font'.

Forgetting to add quotes around string values.

Props are passed as attributes with their names and values. Here, color and size are the correct prop names.

5fill in blank

hard

Fill all three blanks to create a UserCard component that receives name and email props and displays them.

React

function UserCard([1], [2]) {
  return (
    <div>
      <h2>[3]</h2>
      <p>{email}</p>
    </div>
  );
}

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

Aname

Bemail

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Not destructuring both props correctly.

Using a wrong variable name inside JSX.

The component destructures name and email props. Then it displays name inside the h2 tag.