separate stateful-logic-component.tsx

/*
 * By Dan Abramov, @dan_abramov
 * https://mobile.twitter.com/dan_abramov/status/1018945865745084416
 */

import React from "react";
import ReactDOM from "react-dom";

import "./styles.css";

const actions = {
  init() {
    return { value: 0 };
  },
  increment(state) {
    return { value: state.value + 1 };
  },
  decrement(state) {
    return { value: state.value - 1 };
  }
};

class App extends React.Component {
  state = actions.init();

  handleIncrement = () => {
    this.setState(actions.increment);
  };

  handleDecrement = () => {
    this.setState(actions.decrement);
  };

  render() {
    return (
      <div>
        <h2>{this.state.value}</h2>
        <button onClick={this.handleIncrement}>+</button>
        <button onClick={this.handleDecrement}>-</button>
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);