onClick時に重複していなければ値を配列に追加したい。

Question

ブルダウンで値を選び、横にあるボタンをクリックした時に、選択しているプルダウンの値（オブジェクト）と同じオブジェクトが配列に入っていなければ追加するという処理を行いたいです。
現在はボタンのonClickで以下のように実装をしています。

  const initialRows = {
    account: {key: 0, value: ""},
    building: {key: 0, value: ""},
    floor: {key: 0, value: ""},
  }
  const [selectedRows, setSelectedRows] = useState([]);
  const [selectedRowOfSelect, setSelectedRowOfSelect] = useState(initialRows);

 //ボタン部分(nameは引数で渡しています)
  <Button variant="contained" color="primary" onClick={() =>
 {setSelectedRows([...selectedRows,selectedRowOfSelect[name])}}
                  選択</Button>

ですが、現在は重複している値であっても配列に追加されてしまいます。
イメージとしては
selectedRows = [
{key: 1, value: "アカウント１"}
{key: 3, value: "floor3"}
]
とあったとして{key: 3, value: "floor3"}が入ってこようとした場合は追加できない、{key: 3, value: "アカウント１"}の場合は追加できる
オブジェクトのキーバリューともに一致している場合は追加できないといったイメージです。

上記を実装するためのonClick時の処理をどのように記述をすればよいのかがわからないため教えていただけませんでしょうか。
よろしくお願いいたします。

Answer 1

素直に追加先の配列を走査して、同じkey, valueがないかをチェックすれば良いと思います。
配列にはfind関数があって、条件に合う要素を返してくれます。
なので

const newRow = selectedRowOfSelect[name]
const dupObject = selectedRows.find((row) => row.key === newRow.key && row.value === newRow.value)
if (!dupObject) { // 見つからなければundefinedが返る
    setSelectedRows([...selectedRows, newRow])
}

とすればよいかと。

Comments

[alpha95]

回答ありがとうございました。
コメントが遅くなり申し訳ありません。

回答いただいたコードにて意図通りに動かすことができました。
ありがとうございました。