State

01-ToggleHooks.tsx

const Toggle = () => {
  const [isToggle, setIsToggle] = React.useState(true)
  
  const handleClick = () => {
    setIsToggle(!isToggle)
  }
  
  return (
    <button onClick={handleClick}>{isToggle ? 'On' : 'Off'}</button>
  )
}


const App =  () => {
  return (
    <Toggle />
  )
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

02-ToggleArrow.tsx

class Toggle extends React.Component {
   constructor(props) {
    super(props);
    this.state = {isToggleOn: true};
   }
     
  handleClick = () => {
    this.setState((state) => ({
      isToggleOn: !state.isToggleOn
    }));
  }
     
  render() {
    return (
      <button onClick={this.handleClick}>{this.state.isToggleOn ? 'On' : 'Off'}</button>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Toggle />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);

03-ToggleBind.tsx

class Toggle extends React.Component {
  constructor(props) {
    super(props);
    this.state = {isToggleOn: true}
    this.handleClick = this.handleClick.bind(this)
  }
  
  handleClick() {
    this.setState(state => ({
      isToggleOn : !state.isToggleOn 
    }))
  }
  
  render() {
    return (
      <button onClick={this.handleClick}>{this.state.isToggleOn ? 'On' : 'Off' }</button>
    )
  }
}

class App extends React.Component {
  render() {
    return (
      <Toggle />
    )
  }
}

ReactDOM.render(
  <App />,
  document.getElementById('root')
);