FizzBuzzボタンを作りながらReact Hooksを学ぶ 第3回

FizzBuzz ボタンを作りながら React Hooks を学んでいきます。
目次はこちら。

App を改造して FizzBuzz ボタンの表示／非表示を切り替える

前回まででクラスコンポーネントを使う方法で、FizzBuzz ボタンを作りました。
しかしこのままでは FizzBuzz がずっと表示されており、

FizzBuzz.tsx

  // アンマウントされたときの処理
  componentWillUnmount() {
    console.log('unmount');
  }

が呼ばれません。
今回は App を改造して、FizzBuzz の表示／非表示を切り替えられるようにして、アンマウントされたときの処理が動くようにします。
まだ、Hooks は出てきません。

App の state を使って表示／非表示を切り替えます。
disable === false のときは表示、disable === true のときは非表示としています。

hide ボタン、show ボタンを押すたびに、デバッグコンソールに unmount、mount が表示されます。

App.tsx

import React from 'react';
import FizzBuzz from './FizzBuzz';

type Props = {};

type State = {
  disable: boolean;
};

class App extends React.PureComponent<Props, State> {
  constructor(props: {}) {
    super(props);
    this.state = {
      disable: false,
    };
  }

  hide = () => this.setState({ disable: true });

  show = () => this.setState({ disable: false });

  render() {
    const { disable } = this.state;
    const { hide, show } = this;

    return (
      <>
        {disable ? (
          <div>
            <button type="button" onClick={show}>
              show
            </button>
          </div>
        ) : (
          <div>
            <div>
              <button type="button" onClick={hide}>
                hide
              </button>
            </div>
            <FizzBuzz initialCount={0} />
          </div>
        )}
      </>
    );
  }
}

export default App;

今回作成したソースコードはこちら。
今回まででひととおり FizzBuzz ボタンが完成しました。次回は Hooks を使って書き換えていきます。