Interpolation in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to display a greeting with the user's name using interpolation.

React Native

const Greeting = ({ name }) => {
  return <Text>Hello, [1]!</Text>;
};

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

A`name`

B"name"

C${name}

D{name}

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes around the variable name like "name" which shows the text literally.

Using template literals syntax like ${name} inside JSX without curly braces.

In React Native JSX, to insert a JavaScript variable inside a component, you use curly braces {}. So {name} correctly inserts the variable.

2fill in blank

medium

Complete the code to show a message with a variable number using interpolation.

React Native

const Message = ({ count }) => {
  return <Text>You have [1] new messages.</Text>;
};

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

A"count"

B{count}

C`count`

D${count}

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes which show the variable name as text.

Trying to use template literals syntax without curly braces.

Use curly braces {count} in JSX to insert the value of the count variable.

3fill in blank

hard

Fix the error in the code to correctly interpolate the user's age inside the Text component.

React Native

const Age = ({ age }) => {
  return <Text>Your age is [1].</Text>;
};

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

A{age}

B"age"

C${age}

D`age`

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes which display the variable name as text.

Using template literal syntax without curly braces.

In JSX, variables must be wrapped in curly braces to be evaluated. So {age} correctly inserts the variable's value.

4fill in blank

hard

Fill both blanks to create a greeting message that includes the user's first and last name using interpolation.

React Native

const FullName = ({ firstName, lastName }) => {
  return <Text>Hello, [1] [2]!</Text>;
};

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

A{firstName}

B"firstName"

C{lastName}

D"lastName"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes which show variable names as text.

Forgetting curly braces around variables.

Use curly braces to insert both firstName and lastName variables inside JSX.

5fill in blank

hard

Fill all three blanks to display a message with the user's name and age using interpolation.

React Native

const UserInfo = ({ name, age }) => {
  return <Text>[1] is [2] years old.</Text>;
};

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

A"name"

B{name}

C{age}

D"age"

Attempts:

3 left

💡 Hint

Common Mistakes

Using quotes which display variable names as text.

Forgetting curly braces around variables.

Use curly braces to insert both name and age variables inside JSX text.

Practice

1. What is the main purpose of interpolation in React Native JSX?

easy

A. To insert variables or expressions inside text or components dynamically

B. To create new components from existing ones

C. To style components using inline CSS

D. To handle user input events

Solution

1. Step 1: Understand interpolation concept

   Interpolation allows embedding variables or expressions inside strings or JSX to show dynamic content.

2. Step 2: Identify its use in JSX

   In React Native JSX, interpolation is used to display variable values or expressions inside components.

3. Final Answer:

   To insert variables or expressions inside text or components dynamically -> Option A

4. Quick Check:

   Interpolation = dynamic content insertion [OK]

Hint: Interpolation inserts variables inside JSX text easily [OK]

Common Mistakes:

• Confusing interpolation with styling
• Thinking interpolation creates components
• Using interpolation for event handling

2. Which of the following is the correct way to interpolate a variable name inside a Text component in React Native?

easy

A. 'Hello, ' + name

B. "Hello, ${name}"

C. Hello, ${name}

D. {`Hello, ${name}`}

Solution

1. Step 1: Recall JSX interpolation syntax

   In JSX, expressions must be inside curly braces {}. Template literals use backticks and ${} for variables.

2. Step 2: Check each option

   {`Hello, ${name}`} correctly uses curly braces and backticks with ${name} for interpolation.

3. Final Answer:

   <Text>{`Hello, ${name}`}</Text> -> Option D

4. Quick Check:

   Use {`...${var}...`} inside JSX [OK]

Hint: Use backticks and ${} inside curly braces for interpolation [OK]

Common Mistakes:

• Putting template literals directly without curly braces
• Using double quotes with ${} without backticks
• Concatenating strings without JSX braces

3. What will be the output of this React Native code snippet?

const age = 25;
return (
  <Text>{`Age: ${age + 5}`}</Text>
);

medium

A. Age: 25

B. Age: 30

C. Age: ${age + 5}

D. Syntax Error

Solution

1. Step 1: Evaluate the expression inside interpolation

   The expression ${age + 5} calculates 25 + 5 = 30.

2. Step 2: Understand JSX rendering

   The template literal inside curly braces renders as the string 'Age: 30' inside the Text component.

3. Final Answer:

   Age: 30 -> Option B

4. Quick Check:

   Expressions inside ${} are evaluated [OK]

Hint: Expressions inside ${} compute before rendering [OK]

Common Mistakes:

• Thinking ${} prints literally
• Ignoring expression evaluation
• Confusing string concatenation with interpolation

4. Identify the error in this React Native code snippet:

const user = { firstName: 'Anna' };
return (
  <Text>Hello, ${user.firstName}</Text>
);

medium

A. Missing curly braces around interpolation expression

B. Incorrect object property access syntax

C. Text component cannot contain variables

D. Missing import for Text component

Solution

1. Step 1: Check interpolation usage in JSX

   In JSX, expressions must be wrapped in curly braces {} to be evaluated.

2. Step 2: Identify the error

   The code uses ${user.firstName} without curly braces, so it will render literally instead of evaluating.

3. Final Answer:

   Missing curly braces around interpolation expression -> Option A

4. Quick Check:

   Use {`...${var}...`} or {var} inside JSX [OK]

Hint: Always wrap interpolations in JSX with curly braces {} [OK]

Common Mistakes:

• Using ${} without JSX braces
• Trying to access object properties incorrectly
• Forgetting to import components

5. You want to display a greeting that changes based on the time of day using interpolation. Which code correctly shows "Good morning" if hour is less than 12, otherwise "Good evening" inside a Text component?

hard

A. {`Good ${hour > 12 ? 'morning' : 'evening'}`}

B. Good ${hour < 12 ? 'morning' : 'evening'}

C. {`Good ${hour < 12 ? 'morning' : 'evening'}`}

D. {'Good ' + (hour > 12 ? 'morning' : 'evening')}

Solution

1. Step 1: Understand conditional interpolation

   Use a ternary operator inside ${} to choose between 'morning' and 'evening' based on hour.

2. Step 2: Check JSX syntax correctness

   {`Good ${hour < 12 ? 'morning' : 'evening'}`} correctly wraps the template literal in curly braces and uses hour < 12 condition.

3. Step 3: Verify logic correctness

   {`Good ${hour > 12 ? 'morning' : 'evening'}`} reverses the condition incorrectly; B lacks JSX braces; C uses concatenation with reversed condition.

4. Final Answer:

   <Text>{`Good ${hour < 12 ? 'morning' : 'evening'}`}</Text> -> Option C

5. Quick Check:

   Use ternary inside ${} with JSX braces [OK]

Hint: Use ternary inside ${} with backticks and braces [OK]

Common Mistakes:

• Forgetting JSX curly braces
• Using wrong conditional operator
• Mixing concatenation and interpolation incorrectly