Class component

Class.js

import React, { PureComponent } from "react";

import "./styles.css";

export default class Class extends PureComponent {
  constructor(props) {
    super(props);

    this.state = {
      name: "Zagatti",
      count: 0
    };

    this.updateName = this.updateName.bind(this);
    this.increment = this.increment.bind(this);
    this.decrement = this.decrement.bind(this);
  }

  componentDidMount() {
    document.title = `${this.state.name}'s counter`;
  }

  componentDidUpdate(prevProps, prevState) {
    if (prevState.name !== this.state.name) {
      document.title = `${this.state.name}'s counter`;
    }
  }

  increment() {
    this.setState(state => {
      return { count: state.count + 1 };
    });
  }

  decrement() {
    this.setState(state => {
      return { count: state.count - 1 };
    });
  }

  updateName(e) {
    this.setState({ name: e.target.value });
  }

  render() {
    return (
      <div id="section">
        <div class="top">
          <label>Nome:</label>

          <input
            type="text"
            name="name"
            placeholder="Seu nome"
            value={this.state.name}
            onChange={this.updateName}
          />
        </div>

        <div class="buttons">
          <button onClick={this.decrement}>-</button>

          <span>{this.state.count}</span>

          <button onClick={this.increment}>+</button>
        </div>
      </div>
    );
  }
}