Separation of concerns in React - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a React component that only renders a greeting message.

React

function Greeting() {
  return <h1>{"Hello, friend!"}</h1>;
}

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

AHello, friend!

B{Hello, friend!}

C"Hello, friend!"

D<Hello, friend!>

Attempts:

3 left

💡 Hint

Common Mistakes

Forgetting quotes around the string causes syntax errors.

Using curly braces without quotes tries to interpret as JavaScript expression.

Adding extra quotes displays them on screen.

In JSX, text content between tags must be a JavaScript string literal like "Hello, friend!" without extra quotes around the entire string.

2fill in blank

medium

Complete the code to separate the button's click logic into a handler function.

React

function Clicker() {
  function [1]() {
    alert('Clicked!');
  }
  return <button onClick={handleClick}>Click me</button>;
}

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

AclickHandler

BhandleClick

ConClick

Dclick

Attempts:

3 left

💡 Hint

Common Mistakes

Naming the function differently than the onClick attribute causes errors.

Using reserved words like 'onClick' as function names.

The function name must match the event handler used in JSX for clarity and correctness.

3fill in blank

hard

Fix the error in the code by completing the import statement for React hooks.

React

import React, { [1] } from 'react';

function Counter() {
  const [count, setCount] = useState(0);
  return <button onClick={() => setCount(count + 1)}>{count}</button>;
}

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

AuseRef

BuseEffect

CuseContext

DuseState

Attempts:

3 left

💡 Hint

Common Mistakes

Importing the wrong hook causes runtime errors.

Forgetting to import useState leads to 'useState is not defined' error.

The useState hook is needed to create state in the Counter component.

4fill in blank

hard

Fill both blanks to create a component that separates display and logic.

React

function Display({ [1] }) {
  return <p>{message}</p>;
}

function Container() {
  const message = 'Hello from container!';
  return <Display [2]={message} />;
}

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

Amessage

Btext

Cmsg

Dcontent

Attempts:

3 left

💡 Hint

Common Mistakes

Using different prop names causes 'undefined' errors.

Forgetting to pass the prop from Container to Display.

The prop name must match between the Display component's parameter and the Container's prop passed.

5fill in blank

hard

Fill all three blanks to create a reusable button component with separated concerns.

React

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

function App() {
  function handleClick() {
    alert('Button pressed');
  }
  return <Button [1]="Press me" [2]={handleClick} [3]="Press me button" />;
}

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

Alabel

BonClick

CariaLabel

DclickHandler

Attempts:

3 left

💡 Hint

Common Mistakes

Using incorrect prop names breaks the component.

Forgetting accessibility props reduces usability.

Props 'label', 'onClick', and 'ariaLabel' separate button text, click logic, and accessibility label.