Reusable components in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple reusable button component.

React

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

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

Alabel

Btext

Ccontent

Dvalue

Attempts:

3 left

💡 Hint

Common Mistakes

Using a wrong prop name like 'text' or 'value' which is not defined.

Forgetting to use curly braces to insert the prop value.

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

BhandleClick

CclickHandler

DonPress

Attempts:

3 left

💡 Hint

Common Mistakes

Using a different prop name than the one used in the JSX.

Not passing the click handler as a prop.

The component expects a prop named handleClick to be used as the click event handler.

3fill in blank

hard

Fix the error in the reusable component by completing the missing import statement.

React

import React from '[1]';

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

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

Areact-dom

Breact-native

Creact

Dreact-router

Attempts:

3 left

💡 Hint

Common Mistakes

Importing from 'react-dom' which is for rendering, not component definition.

Using 'react-native' which is for mobile apps.

React components need to import from the react package to work properly.

4fill in blank

hard

Fill both blanks to create a reusable component that accepts children and a className prop.

React

function Card({ [1], [2] }) {
  return <div className={className}>{children}</div>;
}

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

Achildren

Bcontent

CclassName

Dstyle

Attempts:

3 left

💡 Hint

Common Mistakes

Using 'content' instead of 'children' for nested elements.

Using 'style' instead of 'className' for CSS classes.

The component uses children to render nested content and className for styling.

5fill in blank

hard

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

React

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

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

Aitem

Bindex

Did

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same variable name for both parameters.

Using a variable not defined in the map function as the key.

The map function uses item and index as parameters, and the index is used as the key for each list item.