>

CODEMASTERYLAB

IDE PLATFORM
CoursesCommunity BlogsKnowledge GraphQuizzesInterview Prep

Sign in to track progress & earn XP

Sign In Create Account
>
Code Mastery Lab

Code Mastery Lab

Sign In

Higher-Order Components — Reusing Behavior Without Inheritance

Question 1 / 1

0:00
Core
Medium

A developer creates an HOC that injects expand/collapse state:

const Expandable = ComposedComponent =>
  class Expandable extends Component {
    constructor(props) {
      super(props)
      this.state = { collapsed: false }
      this.toggle = this.toggle.bind(this)
    }
    toggle() {
      this.setState(({ collapsed }) => ({ collapsed: !collapsed }))
    }
    render() {
      return <ComposedComponent collapsed={this.state.collapsed} toggle={this.toggle} />
    }
  }

const CollapsibleMenu = Expandable(Menu)

The parent renders <CollapsibleMenu title="Settings" onSelect={handleSelect} />. Inside Menu, this.props.title is undefined and this.props.onSelect is undefined. What is the bug and how do you fix it?