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

何が起きたか

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ではコンポーネントが同じ位置にある場合、コンポーネントの状態を保持するらしい
https://react.dev/learn/preserving-and-resetting-state#resetting-state-at-the-same-position

つまり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>

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