Synchrnous App.js

class App extends Component {
  state = { clickCounts: {} };

  onClick = e => {
    e.persist();
    const clickCounts = { ...this.state.clickCounts };
    let clickCount = +clickCounts[e.target.name] || 0;
    clickCounts[e.target.name] = ++clickCount;

    this.setState({ clickCounts };
    console.log(
      `Button Name (◀️ outside) = ${e.target.name}`,
      this.state.clickCounts
    );
  };

  render() {
    const buttons = [1, 2, 3].map(id => (
      <button
        key={id}
        name={`button${id}`}
        onClick={this.onClick}
      >{`Button #${id}`}</button>
    ));

    return <div className="App">{buttons}</div>;
  }
}