reactjs - React 動的状態の変化が起きていない

Question

以下のような状態があるとします。

this.state = {
      modal: ""
    };

次に、以下のようなボタンがあります。

          <button
                type="button"
                className="btn btn-primary"
                onClick={this.createUser}
                data-dismiss={this.state.modal}
              > Save
          </button>

ユーザーの作成は次のようになります。

 createUser = () => {
    this.setState({

      modal: "modal"
    });
  };

したがって、ボタンをクリックすると、createUser でモーダルとして割り当てたので、data-dismiss ボタンの形式で定義されたブートストラップ モーダルを閉じたいと思います。

しかし、それは保存ボタンの2回目のクリックでのみ機能します。なんで？

また、ワンクリック自体に変更するにはどうすればよいですか？