Props passing in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to pass a prop named title with value 'Hello' to the Greeting component.

React Native

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

function Greeting(props) {
  return <Text>{props.title}</Text>;
}

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

Atitle='Hello'

Btext='Hello'

Cmessage='Hello'

Dname='Hello'

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name than expected inside the component.

Forgetting to pass the prop at all.

The prop name must match the one used inside the component. Here, title is the correct prop name.

2fill in blank

medium

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

React Native

function User([1]) {
  return <Text>Welcome, {name}!</Text>;
}

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

A{name}

Bprops

Cname

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using props but then trying to use name without props.name.

Using curly braces inside the parameter list incorrectly.

Using destructuring, you can directly extract name from props by writing function User({name}).

3fill in blank

hard

Fix the error in the code by completing the prop usage correctly.

React Native

function Message(props) {
  return <Text>{props.[1]</Text>;
}

// Usage
<Message text="Hi!" />

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

Acontent

Bmessage

Ctitle

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name inside the component than the one passed.

Forgetting to use props. before the prop name.

The prop passed is named text, so inside the component you must use props.text to access it.

4fill in blank

hard

Fill both blanks to pass two props firstName and lastName to the UserCard component.

React Native

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

function UserCard({ firstName, lastName }) {
  return <Text>{firstName} {lastName}</Text>;
}

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

AfirstName='John'

Bname='John'

ClastName='Doe'

Dsurname='Doe'

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop names like name or surname.

Passing props without values.

Props must match the names expected by the component: firstName and lastName.

5fill in blank

hard

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

React Native

function Profile({ [1], [2], [3] }) {
  return (
    <View>
      <Text>Username: {username}</Text>
      <Text>Age: {age}</Text>
      <Text>Member: {isMember ? 'Yes' : 'No'}</Text>
    </View>
  );
}

function App() {
  return <Profile username="alice" age={30} isMember={true} />;
}

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

Ausername

Bage

CisMember

Duser

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong or incomplete prop names in destructuring.

Forgetting commas between prop names.

The component destructures the props by their exact names: username, age, and isMember.