✨すべての表示画面の下地となるBasisコンポーネントを作成する

[TYMtwilight]

成果物

ログイン画面とサインアップ画面以外のすべての画面の大元となるBasisコンポーネントを作成します。

必要な知識

特になし

必要な作業

• [x] ComponentsフォルダにBasis.tsxを追加
• [x] Basisコンポーネントの雛形を作成
• [x] BasisコンポーネントにFeedコンポーネントや、Uploadコンポーネントなどをインポート
• [x] Appコンポーネントの修正
• [x] ボタンをクリックすることで画面を切り替える機能を実装
• [x] MaterialUIからアイコンをインポート
• [x] JSXにMaterialUIのアイコンボタンを追加

[TYMtwilight]

:bug: <input type="radio">を使って、ステートtabを管理しようとしたら、エラーが発生した。

以下のとおり、JSXを記述したら、下の図のとおり、エラーが発生した。

return (
    <div>
      {tab === "Feed" && <Feed />}
      {tab === "Search" && <p>Search</p>}
      {tab === "Notification" && <p>Notification</p>}
      {tab === "DM" && <p>DM</p>}
      <input
        type="radio"
        name="tabs"
        value="Feed"
        checked
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          e.preventDefault();
          setTab(e.target.value as Tab);
        }}
      >
        フィード
      </input>
      <input
        type="radio"
        name="tabs"
        value="Search"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          e.preventDefault();
          setTab(e.target.value as Tab);
        }}
      >
        検索
      </input>
      <input
        type="radio"
        name="tabs"
        value="Notifications"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          e.preventDefault();
          setTab(e.target.value as Tab);
        }}
      >
        通知
      </input>
      <input
        type="DM"
        name="radio"
        value="DM"
        onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
          e.preventDefault();
          setTab(e.target.value as Tab);
        }}
      >
        DM
      </input>
    </div>
  );

エラーの内容を読む限り、<input type="radio">を使用して、ステートを書き換えているのが、エラーを起こしている模様だった。そのため、<button />タグに変更して、onClickイベントに応じてステートを書き換えるようにしたところ、エラーが解決した。

[TYMtwilight]

課題が達成されたので、イシューをクローズします😉