如何在表视图搜索时隐藏集合视图？

import React, { useState } from "react";

const TableSearch = () => {
  const [searchKeyword, setSearchKeyword] = useState("");
  const [showCollectionView, setShowCollectionView] = useState(true);
  const tableData = [...]; // 表视图中的数据
  const collectionData = [...]; // 集合视图中的数据

  const handleSearchInputChange = (e) => {
    const keyword = e.target.value;
    setSearchKeyword(keyword);

    // 过滤表视图中的数据
    const filteredTableData = tableData.filter((item) =>
      item.name.includes(keyword)
    );

    // 根据搜索结果判断是否隐藏集合视图
    setShowCollectionView(filteredTableData.length === 0);
  };

  return (
    <div>
      <input
        type="text"
        value={searchKeyword}
        onChange={handleSearchInputChange}
        placeholder="输入搜索关键字"
      />

      {/* 表视图 */}
      {tableData.map((item) => (
        <div key={item.id}>{item.name}</div>
      ))}

      {/* 集合视图 */}
      {showCollectionView &&
        collectionData.map((item) => (
          <div key={item.id}>{item.name}</div>
        ))}
    </div>
  );
};

export default TableSearch;