コンポーネントに「状態」を覚えさせるstate

コンストラクタでthis.stateを設定。
コンポーネント内でプライベートなもの。

constructor(props) {
    super(props);
    this.state = {
      val: null,
    };
  }

stateを更新するにはsetState

this.setState( {val: 'ボタンクリックしたよ'} )

▲setStateを呼び出すことでReactはstateが変わったとわかるのでrender()し直す→DOM更新
this.state.valと直接変更すると再レンダーされないので必ずsetState()をつかう

this.propsとthis.stateの値に依存してstateを更新したいときはコールバック関数をつかう

this.setState((state, props) => ({
  counter: state.counter + props.increment
}));

▲前のstateを1つ目の引数、更新が適用される時点でのpropsを2つ目の引数で受け取れる。

stateの更新はマージ

内部でObject.assign()をしてる。
参考記事

stateのデータフローは下方向（親→子）

“トップダウン” “単一方向” データフロー