👯

Reactの条件分岐でのボタン切り替えでつらい思いをした

2024/01/16に公開

React

memo

TypeScript

tech

何が起きたか

EDITボタンをクリックしてUPDATEボタンに切り替えたい

  const [flg, setFlg] = useState(false);
  return (
    <form>
      {flg ? (
        <button type="submit">UPDATE</button>
      ) : (
        <button type="button" onClick={() => setFlg(true)}>
          EDIT
        </button>
      )}
    </form>
  )

上記のようなステートによってボタンを切り替えたいときに、
type="button"のはずのEDITボタンをクリックしてもなぜかsubmitが発火してしまう事象が発生しました😠

原因

Reactではコンポーネントが同じ位置にある場合、コンポーネントの状態を保持するらしい

つまりEDITボタンがUPDATEボタンのtype="submit"の状態を保持してしまっているってこと...？😐

解決方法

解決方法としては、

別の位置にレンダリングする
keyを付与する

の2種類あるらしいです

別の位置にレンダリングする

<form>
  {flg && (
    <button key="update" type="submit">UPDATE</button>
  )}
  {!flg && (
    <button key="edit" type="button" onClick={() => setFlg(true)}>
      EDIT
    </button>
  )}
</form>

keyを付与する

<form>
  {flg ? (
    <button key="update" type="submit">UPDATE</button>
  ) : (
    <button key="edit" type="button" onClick={() => setFlg(true)}>
      EDIT
    </button>
  )}
</form>

どちらでも解決しました🎊

何が起きたか

原因

解決方法

別の位置にレンダリングする

keyを付与する

Discussion