Composition vs inheritance in NextJS - Interactive Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a simple component using composition in Next.js.

NextJS

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

function App() {
  return <div>[1] label="Click me" />;</div>;
}

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

AButton

BApp

Cbutton

DLabel

Attempts:

3 left

💡 Hint

Common Mistakes

Using lowercase 'button' instead of the custom component 'Button'.

Trying to use 'App' inside itself causing recursion.

The App component uses composition by including the Button component inside its JSX.

2fill in blank

medium

Complete the code to extend a component using inheritance in React (Next.js).

NextJS

import React from 'react';

class BaseButton extends React.Component {
  render() {
    return <button>{this.props.label}</button>;
  }
}

class [1] extends BaseButton {
  render() {
    return <button style={{ color: 'red' }}>{this.props.label}</button>;
  }
}

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

AAppButton

BButton

CBaseButton

DRedButton

Attempts:

3 left

💡 Hint

Common Mistakes

Using the same name as the base class causing conflicts.

Not extending the base class properly.

The RedButton class extends BaseButton to change the button style using inheritance.

3fill in blank

hard

Fix the error in the code by completing the blank to correctly use composition with props.

NextJS

function Card({ title, content }) {
  return (
    <div>
      <h2>{title}</h2>
      <p>{content}</p>
    </div>
  );
}

function Page() {
  const info = { title: 'Hello', content: 'Welcome to the page' };
  return <Card [1] />;
}

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

Ainfo

Binfo.props

C...info

Dprops.info

Attempts:

3 left

💡 Hint

Common Mistakes

Passing the whole object without spreading causes a single prop named 'info'.

Trying to access props incorrectly.

Using the spread operator ...info passes all properties of info as props to Card.

4fill in blank

hard

Fill both blanks to create a component that uses composition and passes a callback prop.

NextJS

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

function App() {
  function handleClick() {
    alert('Clicked!');
  }
  return <Button onClick=[2] label="Press me" />;
}

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

AhandleClick

B() => alert('Clicked!')

ChandleClick()

Dalert('Clicked!')

Attempts:

3 left

💡 Hint

Common Mistakes

Using parentheses calls the function immediately instead of on click.

Passing an inline alert string instead of a function.

The onClick prop should be a function reference, so both blanks use handleClick without calling it.

5fill in blank

hard

Fill all three blanks to create a component that uses inheritance and overrides a method with additional behavior.

NextJS

import React from 'react';

class Logger extends React.Component {
  log() {
    console.log('Logging');
  }
  render() {
    return <div>Logger</div>;
  }
}

class CustomLogger extends Logger {
  [1]() {
    super.[2]();
    console.log([3]);
  }
}

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

Alog

Brender

C'Custom log message'

D'Overridden log'

Attempts:

3 left

💡 Hint

Common Mistakes

Overriding the wrong method like 'render'.

Not calling the parent method with super.

Logging a variable instead of a string message.

The CustomLogger class overrides the log method, calls the original with super.log(), and adds a custom message.