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.