Reactで複数のselect要素の値をそれぞれユニークな値にしたい

Question

前提・実現したいこと

お世話になっております。

タイトル通りReactで複数のselect要素の値をそれぞれユニークな値にしたいと思っています。
例えば3つのselect要素があり、それぞれ1～3の数字が選択できるとして、いずれかで1を選択した場合は他の2つでは1が選択できなくなる、という仕様にしたいです。

一応自分なりに実装はしてみたのですが、なぜか画面上でselect要素が更新されずおかしな動きになっています。

codesandboxのサンプル

該当のソースコード

import { useState, ChangeEvent } from 'react'

type RankData = {
  name: string
  rank?: string
}
const initialData = [{ name: '佐藤' }, { name: '田中' }, { name: '鈴木' }, { name: '高橋' }]
const ranks = ['1位', '2位', '3位', '4位']

export const App = () => {
  const [rankData, setRankData] = useState<RankData[]>(initialData)
  const unselectedRanks = ranks.filter((rank) => {
    const usedRanks = rankData.map(({ rank: usedRank }) => usedRank)
    return !usedRanks.includes(rank)
  })
  const updateRankData = (e: ChangeEvent<HTMLSelectElement>, targetIndex: number) => {
    setRankData((preRankData) =>
      preRankData.map((preData, index) => {
        const { name } = preRankData[targetIndex]
        const rank = e.target.value
        return index === targetIndex ? { name, rank } : preData
      })
    )
  }

  return (
    <div id="app">
      {rankData.map(({ name, rank }, index) => (
        <div key={name}>
          <p>{name}</p>
          <select onChange={(e) => updateRankData(e, index)} value={rank}>
            <option>--順位を選択--</option>
            {unselectedRanks.map((unselectedRank) => (
              <option key={unselectedRank} value={unselectedRank}>
                {unselectedRank}
              </option>
            ))}
          </select>
        </div>
      ))}
    </div>
  )
}

試したこと

上記の通り、unselectedRanksというrankData内で使われていない値を保持する配列を作成して、それをループさせてoptionを作成しました。
今の自分では、正直どこが間違っているのか分からないので、よろしければみなさん力をお貸しください。

codesandboxのサンプル

Answer 1

例えば佐藤さんが 1 位の場合、佐藤さんの select 要素には '1位' も表示する必要があるので、次のように unselectedRanks を関数にすれば良いのでは。
また、順位を選択済みの人を「--順位を選択--」に戻した場合に rank: '--順位を選択--' という情報が入ってしまうので、その場合の value は '' にするとか…。

 export const App = () => {
   const [rankData, setRankData] = useState<RankData[]>(initialData)
-  const unselectedRanks = ranks.filter((rank) => {
-    const usedRanks = rankData.map(({ rank: usedRank }) => usedRank)
-    return !usedRanks.includes(rank)
+  const unselectedRanks = (name: string) => ranks.filter((rank) => {
+    return rankData.every((data) => data.name === name || data.rank !== rank);
   })
 
   // 略
 
           <select onChange={(e) => updateRankData(e, index)} value={rank}>
-            <option>--順位を選択--</option>
-            {unselectedRanks.map((unselectedRank) => (
+            <option value=''>--順位を選択--</option>
+            {unselectedRanks(name).map((unselectedRank) => (
               <option key={unselectedRank} value={unselectedRank}>

Comments

[taku-hu]

全て共通のunselectedRanksを使っていると自身で選んだ選択肢も消えてしまう、という事に全然気づけませんでした...
あとそれを踏まえてもeveryで一発で出す実装は浮かばなかったので勉強になりました。

ご回答ありがとうございました。

Answer 2

今の自分では、正直どこが間違っているのか分からないので、

全部のセレクトボックスに対して同じunselectedRanksを使うのが妥当ではありません。「1位」を選んだ箇所では、1位をリストに残しておく必要があります。

Comments

[taku-hu]

言われてみれば自身で選んだ瞬間にその選択肢も消えてしまうので、画面上で選択できていない状態になるのは当然でした...

ご回答ありがとうございました。