نمایش بعد از جستجو

انگار در لحظه لود صفحه متغیر books رو با نتیجه api پر کردی.
این کار رو انجام نده و زمانی کتاب‌ها رو لود که کاربر رو دکمه جستجو یا هر گزینه دیگه‌ای که گذاشتی کلیک کنه.
من react کار نیستم ولی کدت ساده‌ست و به نظر اینطور میاد.

سلام
دوست عزیز شما هر جا کامپوننت سرچ تان صدا زدید props ->emptySearch مقدارش همان مقدار hook search که تعریفش کردید قرار میدید.

const [search , setSearch ] = useState("");

<Search emptySearch={search} />

import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";
import SearchItem from "../../utils/items/SearchItem";
import Filters from "./Filters";

function Search(props) {
  const { emptySearch } = props
  const state = useContext(GlobalState);
  const [books] = state.searchAPI.books;

  return (
    <div className="container mt-4">
      <div className="row">
        <div className="col-md-12">
            <Filters />
            <ul className="list-inline text-center">
              {emptySearch == "" ? '': books.map((book) => {
                return <SearchItem key={book._id} book={book} />;
              })}             
            </ul>
          </div>
        </div>
      </div>
  );
}

export default Search;

خیلی ممنون که وقت گذاشتید

این صفحه ای هست که کتاب ها رو فیلتر میکنه و APIها رو از GlobalState که قبلا قرار دادم میگیره

import React, { useContext } from "react";
import { GlobalState } from "../../../GlobalState";

function Filters() {
  const state = useContext(GlobalState);
  const [search, setSearch] = state.searchAPI.search;

  return (
    <div className="container mt-1">
      <div className="row">
        <input
          type="text"
          className="form-control col-md-6 offset-md-3 badge-pill"
          placeholder="جــســتــجــو"
          value={search}
          onChange={(e) => setSearch(e.target.value.toLowerCase())}
        />
      </div>
    </div>
  );
}

export default Filters;

اینم آیتم های فیلتر شده رو نشون میده

import React from "react";
import { Link } from "react-router-dom";

function SearchItem({ book }) {
  return (
    <div className="container-fluid col-md-8">
      <div className="box6">
        <div className="ol-md-12 col-sm-12 col-xs-12 box6-inner text-center">
          <div className="f7 co">{book.title}</div>
          <div className="card-body">
            <Link
              to={`/book/${book._id}`}
              className="btn icon fa fa-eye mt-3"
            />
          </div>
        </div>
      </div>
    </div>
  );
}

export default SearchItem;

من اینجا نمیتونم از هوک useState استفاده کنم
چطور میتونم این کارو انجام بدم؟
ممنون میشم اگه بتونی راهنماییم کنی❤️