react-state-hook.js

// using class component to manage state
import React, { Component } from 'react'

class Counter extends Component {
  constructor(props) {
    super(props)
    this.state = { counter: 0 }
  }

  addOne = () => {
    this.setState({counter: this.state.counter + 1})
  }

  render() {
    return (
      <div>
        {this.state.counter}
        <button onClick={this.addOne}>add</button>
      </div>
    )
  }
}

export default Counter

// using functional component with state hook to manage state
import React, { useState, useEffect } from 'react'

const Counter = () => {
  const [counter, setCounter] = useState(0)

  const addOne = () => setCounter(counter + 1)

  return (
    <div>
      <p>{counter}</p>
      <button onClick={addOne}>add</button>
    </div>
  )
}

export default Counter