What are props in React - Interactive Quiz & Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a prop named name with value "Alice" to the Greeting component.

React

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

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

Avalue="Alice"

Bname="Alice"

Cprop="Alice"

Dtext="Alice"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect attribute names like 'value' or 'prop' instead of the prop name.

Props are like attributes you add to components. Here, name="Alice" passes the value "Alice" as a prop called name.

2fill in blank

medium

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

React

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

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

Aname

Bprops

C{name}

Dprops.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'props' without destructuring and then trying to use 'name' directly.

Using {name} in the function parameter extracts the name prop directly for easy use.

3fill in blank

hard

Fix the error in the code to correctly display the name prop.

React

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

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

Aprops[name]

Bname

Cprops.name

Dprops->name

Attempts:

3 left

💡 Hint

Common Mistakes

Trying to use 'name' directly without destructuring or accessing it from props.

When using props as a parameter, access the name prop with props.name.

4fill in blank

hard

Fill both blanks to pass two props firstName and age to the User component.

React

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

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

AfirstName="Bob"

Bage={30}

Cname="Bob"

Dyears={30}

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong prop names or passing numbers as strings.

Props are passed as attributes. Here, firstName="Bob" and age={30} pass two props correctly.

5fill in blank

hard

Fill all three blanks to create a Profile component that receives props and displays them.

React

function Profile([1], [2], [3]) {
  return (
    <div>
      <h2>{firstName} {lastName}</h2>
      <p>Age: {age}</p>
    </div>
  );
}

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

AfirstName

Bage

ClastName

Dprops

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'props' instead of destructuring individual props.

The component destructures the props firstName, lastName, and age to use them inside.