我已经开始在firebase的帮助下做React pp。到目前为止，我设法获取了所有的数据并实现了搜索功能。我想添加一个通过价格和标题搜索的功能。你能帮我吗？我已经设置了状态并选择了onCHange，但不知道我如何进一步做这件事。任何想法都是非常受欢迎的。perNight存储在Information组件中，因此我认为它必须从外面渲染，但是下一步呢？谢谢，这是我目前为止的代码：

import { DocumentData, onSnapshot, QuerySnapshot } from "firebase/firestore";
import { useEffect, useState } from "react";
import { hotelsCollection } from "../lib/controller";
import { NewHotelType } from "../types/hotel";
import Information from "./Information";

function Card() {
  const [hotels, setHotels] = useState<NewHotelType[]>([]);
  const [search, setSearch] = useState("")
  const [filter, setFilter] = useState('All');

  useEffect(
    () =>
      onSnapshot(hotelsCollection, (snapshot: QuerySnapshot<DocumentData>) => {
        setHotels(
          snapshot.docs.map(doc => {
            return {
              id: doc.id,
              ...doc.data(),
            };
          })
        );
      }),
    []
  );

  return (
    <div className="card">

      <select onChange={(e) => setFilter(e.target.value)}>
        <option value="Filter By">Filter By</option>
        <option value="perNight">perNight</option>
        <option value="title">title</option>
      </select>

      <div className="search">
        <input className="inputsearch" 
        value={search} type="text" placeholder="Search for the hotel" onChange={(e) => setSearch(e.target.value)}
        />
    </div>
    {hotels && hotels.length ? (
      <div>
    {hotels?.filter((item:NewHotelType) => {
          if (search === "" && !search.length) {
            return item;
          }
          return item?.title === search;
        })
        ?.map((hotel:NewHotelType) => (<Information key={hotel.id} hotel={hotel}
        /> 
        ))}
        </div>
    ):
    <h2 className="no-hotels">There are no hotels</h2>
}
    </div>
  );
}

export default Card;