Build a Frontend Web Framework (From Scratch)

10 Component methods

This chapter covers

• Implementing component methods to handle events
• Binding a method’s context to the component
• Passing the host component reference to mount and patch functions

What happens when you’re handling an event in a component that requires a couple of lines of code? One-liners, like this one, look fine inside the virtual Document Object Model (DOM) definition:

render() {
  const { count } = this.state

  return hFragment([
    h(
      'button',
      { on: { click: () => this.updateState({ count: count - 1 }) }}    #1
      ['Decrement']
    ),
    h('span', {},  [count]),
    h(
      'button',
      { on: { click: () => this.updateState({ count: count + 1 }) }}    #2
      ['Increment']
    )
  ])
}

#1 Handles the click event by decrementing the count #2 Handles the ...