Default props in React Native - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a default value for the title prop in a React Native component.

React Native

function Header({ title = [1] }) {
  return <Text>{title}</Text>;
}

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

Aundefined

Bnull

C"Welcome"

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as default will render nothing.

Forgetting to use quotes around string default values.

Setting a default value for the title prop ensures the component shows "Welcome" if no title is passed.

2fill in blank

medium

Complete the code to assign default props using the defaultProps property.

React Native

const Button = ({ label }) => <Text>{label}</Text>;

Button.[1] = {
  label: [2]
};

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

AdefaultProps

BpropsDefault

C"Click me"

D"Press"

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like propsDefault.

Not quoting string default values.

The defaultProps property sets default values for props. Here, label defaults to "Click me".

3fill in blank

hard

Fix the error in the code to properly set default props for a functional component.

React Native

function Label(props) {
  return <Text>{props.text}</Text>;
}

Label.defaultProps = [1];

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

A{ text: 'Default Text' }

B[ text: 'Default Text' ]

C"Default Text"

Dtext = 'Default Text'

Attempts:

3 left

💡 Hint

Common Mistakes

Using array syntax instead of object.

Assigning a string directly instead of an object.

Default props must be an object with keys matching prop names and their default values.

4fill in blank

hard

Fill both blanks to set default props and use them in the component.

React Native

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

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

A"Guest"

Bname

Cuser

D"User"

Attempts:

3 left

💡 Hint

Common Mistakes

Using a string literal instead of the prop variable inside JSX.

Not setting a default value for the prop.

The default value for name is "Guest". The component uses the name prop inside the text.

5fill in blank

hard

Fill all three blanks to define default props and use them in a React Native component.

React Native

function Info({ title = [1], subtitle = [2] }) {
  return (
    <View>
      <Text>{ [3] }</Text>
      <Text>{subtitle}</Text>
    </View>
  );
}

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

A"No Title"

B"No Subtitle"

Ctitle

D"Title"

Attempts:

3 left

💡 Hint

Common Mistakes

Using string literals instead of prop variables inside JSX.

Not setting default values for both props.

Default props title and subtitle are set to strings. The component displays title and subtitle correctly.