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.

Practice

1. What is the main purpose of props in React components?

easy

A. To handle user events like clicks

B. To store internal state within a component

C. To style components with CSS

D. To pass data from a parent component to a child component

Solution

1. Step 1: Understand the role of props

   Props are used to send data from a parent component to a child component in React.

2. Step 2: Differentiate props from other concepts

   State stores internal data, events handle user actions, and CSS styles components, but props specifically pass data down.

3. Final Answer:

   To pass data from a parent component to a child component -> Option D

4. Quick Check:

   Props = Data passing [OK]

Hint: Props always send data from parent to child [OK]

Common Mistakes:

• Confusing props with state
• Thinking props handle events
• Believing props style components

2. Which of the following is the correct way to use a prop named title inside JSX?

easy

A. <h1>title</h1>

B. <h1>{title}</h1>

C. <h1>{props.title}</h1>

D. <h1>$title</h1>

Solution

1. Step 1: Use curly braces to embed prop values in JSX

   In JSX, to show a prop value, you wrap the prop access in curly braces like {props.title}.

2. Step 2: Understand context of prop usage

   The props object is passed to the component function, so access via {props.title}. Using {title} requires destructuring like function Comp({title}).

3. Final Answer:

   <h1>{props.title}</h1> -> Option C

4. Quick Check:

   Curly braces show prop values [OK]

Hint: Use curly braces { } to show props in JSX [OK]

Common Mistakes:

• Writing prop name as plain text without braces
• Using $ sign like in other languages
• Using {title} without destructuring the props object

3. Given the component:

function Greeting(props) {
  return <h2>Hello, {props.name}!</h2>;
}

// Usage:
<Greeting name="Alice" />

What will be rendered on the screen?

medium

A. Hello, {name}!

B. Hello, Alice!

C. Hello, props.name!

D. SyntaxError

Solution

1. Step 1: Identify how props are passed and used

   The Greeting component receives a prop called name with value "Alice".

2. Step 2: Understand JSX rendering with props

   The JSX uses {props.name} which inserts the string "Alice" inside the <h2> tag.

3. Final Answer:

   <h2>Hello, Alice!</h2> -> Option B

4. Quick Check:

   props.name = Alice [OK]

Hint: Props values appear inside curly braces in JSX output [OK]

Common Mistakes:

• Expecting literal text {name} instead of value
• Confusing props.name with string 'props.name'
• Thinking this causes syntax error

4. What is wrong with this React component code?

function Welcome(props) {
  return <h1>Welcome, props.name!</h1>;
}

medium

A. props.name should be inside curly braces to render its value

B. Function name should be lowercase

C. Missing return statement

D. JSX tags must be self-closing

Solution

1. Step 1: Check how props are used inside JSX

   The code writes props.name as plain text inside JSX, so it will render literally instead of the prop value.

2. Step 2: Correct usage of props in JSX

   To show the value of props.name, it must be wrapped in curly braces like {props.name}.

3. Final Answer:

   props.name should be inside curly braces to render its value -> Option A

4. Quick Check:

   Use {props.name} to show prop value [OK]

Hint: Always wrap props in { } inside JSX [OK]

Common Mistakes:

• Writing props.name as plain text
• Thinking function names must be lowercase
• Confusing JSX self-closing rules

5. You want to create a reusable Button component that shows different text based on a label prop. Which code correctly uses props to achieve this?

function Button(props) {
  return <button>???</button>;
}

Choose the correct replacement for ???.

hard

A. {props.label}

B. {label}

C. "props.label"

D. label

Solution

1. Step 1: Understand how to access props inside the component

   The component receives props as an object, so the label prop is accessed as props.label.

2. Step 2: Use curly braces to embed the prop value in JSX

   To show the value inside JSX, wrap props.label in curly braces: {props.label}.

3. Final Answer:

   {props.label} -> Option A

4. Quick Check:

   Use {props.propName} to show prop value [OK]

Hint: Use {props.propName} inside JSX to show prop values [OK]

Common Mistakes:

• Using prop name without braces
• Using braces without props object
• Using quotes around prop name