Reusable UI components in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple reusable button component in React.

React

function Button({ label }) {
  return <button>[1];</button>;
}

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

Acontent

Btext

Clabel

Dchildren

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong prop name like 'text' or 'children' which are not defined here.

The label prop is used to display the button text inside the button element.

2fill in blank

medium

Complete the code to pass a click handler to the reusable button component.

React

function Button({ label, [1] }) {
  return <button onClick={handleClick}>{label}</button>;
}

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

AonClick

BclickHandler

ChandleClick

DonPress

Attempts:

3 left

💡 Hint

Common Mistakes

Using non-standard prop names like 'clickHandler' or 'onPress' which React does not recognize.

The prop onClick is the standard React event handler for button clicks.

3fill in blank

hard

Fix the error in the reusable button component to correctly call the click handler passed as a prop.

React

function Button({ label, onClick }) {
  return <button onClick=[1]>{label}</button>;
}

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

AonClick

BonClick()

ChandleClick

DonClick => onClick()

Attempts:

3 left

💡 Hint

Common Mistakes

Calling the function immediately with parentheses, which triggers it on render.

You should pass the function reference onClick directly, not call it immediately.

4fill in blank

hard

Fill both blanks to create a reusable input component that updates its value on change.

React

function TextInput({ value, [1] }) {
  return <input type="text" value={value} onChange=[2] />;
}

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

AonChange

BhandleChange

CsetValue

DupdateValue

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop names or not passing the handler function properly.

The prop onChange is used to handle input changes, and handleChange is the function passed to update the value.

5fill in blank

hard

Fill all three blanks to create a reusable list component that renders items with keys.

React

function ItemList({ items }) {
  return (
    <ul>
      {items.map([1] => (
        <li key=[2]>[3]</li>
      ))}
    </ul>
  );
}

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

Aitem

Bitem.id

Citem.name

Dindex

Attempts:

3 left

💡 Hint

Common Mistakes

Using index as key which can cause rendering issues.

Not using the correct variable name inside the map.

We map over items using item as the variable. The key uses item.id for uniqueness, and we display item.name inside the list item.