Using props in JSX in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display the prop value inside the component.

React

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

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

Aprops

Bname

Cthis.props.name

Dprops.name

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'this.props.name' inside a functional component causes an error.

Using just 'name' without 'props.' will not work.

In React functional components, props are accessed directly as props.propertyName. Here, props.name correctly accesses the name prop.

2fill in blank

medium

Complete the code to pass a prop called 'title' with value 'Welcome' to the Header component.

React

<Header [1]="Welcome" />

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

Atext

Btitle

Cname

Dlabel

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong prop name like 'text' or 'name' will not pass the correct prop.

Forgetting the quotes around the string value causes errors.

Props are passed as attributes to components. Here, title="Welcome" passes the 'title' prop with the value 'Welcome'.

3fill in blank

hard

Fix the error in the code to correctly display the 'age' prop inside the component.

React

function UserInfo(props) {
  return <p>Age: [1]</p>;
}

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

Aage

Bthis.props.age

Cprops.age

Dprops[age]

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'this.props.age' causes an error in functional components.

Using 'age' alone is undefined.

In functional components, props are accessed directly via props.propertyName. Using this.props is for class components only.

4fill in blank

hard

Fill both blanks to correctly display the 'firstName' and 'lastName' props inside the component.

React

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

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

Aprops.firstName

Bprops.lastName

CfirstName

DlastName

Attempts:

3 left

💡 Hint

Common Mistakes

Using just 'firstName' or 'lastName' without 'props.' causes errors.

Trying to concatenate strings without JSX curly braces.

Use props.firstName and props.lastName to access the props inside the component.

5fill in blank

hard

Fill all three blanks to create a component that returns a greeting using the 'greeting', 'name', and 'punctuation' props.

React

function Message(props) {
  return <h2>[1] + ', ' + [2] + [3]</h2>;
}

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

Aprops.greeting

Bprops.name

Cprops.punctuation

Dprops.message

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop names like 'props.message'.

Forgetting to use 'props.' before the prop names.

Access each prop with props.propName to build the greeting message.