Trivial React State Hook example

ClassBasedToggle.jsx

import { Component } from 'react'

export default ClassBasedToggle extends React.Component {
  constructor(props) {
    super(props)
    
    this.state = {
      on: false,
    }
    
    this.handleToggle = this.handleToggle.bind(this)
  }
  
  handleToggle() {
    this.setState({ on: !this.state.on })
  }
  
  render() {
    return <button onClick={handleToggle}>Toggle {this.state.on ? 'off' : 'on'}</button>
  }
}

HookBasedToggle.jsx

import { useState } from 'react'

export default function HookBasedToggle(props) {
  const [on, setOn] = useState(false)
  
  function handleToggle() {
    setOn(!on)
  }
  
  return <button onClick={handleToggle}>Toggle {on ? 'off' : 'on'}</button>
}