Default props in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to set a default value for the name prop in a React functional component.

React

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

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

A"Guest"

Bnull

Cundefined

D0

Attempts:

3 left

💡 Hint

Common Mistakes

Using null or undefined as default will show nothing.

Forgetting to use quotes around string default values.

Setting name = "Guest" in the function parameter provides a default value if no name prop is passed.

2fill in blank

medium

Complete the code to assign a default prop value using the defaultProps property.

React

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

Button.[1] = {
  label: "Click me"
};

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

Adefaults

BdefaultProps

CpropsDefaults

DdefaultValues

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect property names like 'defaults' or 'defaultValues'.

Trying to set defaults inside the function body instead of outside.

React components can have a defaultProps property to set default values for props.

3fill in blank

hard

Fix the error in this React component by completing the default prop assignment correctly.

React

const Welcome = ({ greeting }) => <h2>{greeting}</h2>;

Welcome.[1] = {
  greeting: "Hello!"
};

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

AdefaultProps

Bdefaults

CpropDefaults

Ddefault

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'default' or 'defaults' instead of 'defaultProps'.

Trying to assign default props inside the component function.

The correct property to assign default props is defaultProps. Others cause errors.

4fill in blank

hard

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

React

function Card({ title = [1] }) {
  return <div><h3>{title}</h3></div>;
}

Card.[2] = {
  title: "Default Title"
};

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

A"Default Title"

BdefaultProps

Cdefaults

D"Card Title"

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong property names like 'defaults'.

Not using quotes for string default values.

The default value in the parameter can be set to a string, and defaultProps sets defaults outside the function.

5fill in blank

hard

Fill all three blanks to create a component with default props and use them inside.

React

const Label = ({ text = [1], color = [2] }) => {
  return <span style={{ color: [3] }}>{text}</span>;
};

Label.defaultProps = {
  text: "Name",
  color: "blue"
};

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

A"Name"

B"blue"

Ccolor

Dtext

Attempts:

3 left

💡 Hint

Common Mistakes

Using the string 'color' in style instead of the variable.

Not matching default values with defaultProps.

Default values in parameters match the defaultProps. The style color uses the color prop.