Di sini saya memiliki komponen pencarian hal yang saya coba capai adalah miliknya. Bagaimana saya akan mendekati di mana tidak ada item dalam array, haruskah saya membuat pernyataan jika, atau apa yang harus saya lakukan untuk mencapai ini. Bantuan akan sangat dihargai. Terima kasih

import React,{useState, useEffect, useRef, useContext}from 'react'
import {FaSearch} from 'react-icons/fa'
import { 
    Link, useHistory
  } from "react-router-dom";
import { BookContext } from '../../context/books';
import SearchBooks from './SearchBooks';

const Search = () => {

  const {data}= useContext(BookContext)
  const [searchValue, setSearchValue] = React.useState('');
  const history= useHistory()

  function filterBooks(book) {
    console.log(book);
    if(!searchValue.length ) return book.bookName > 10
    if (!searchValue.length  ) return false;
    return book.bookName?.toLowerCase().includes(searchValue.toLowerCase());
  }


    return (
        <div className='search__cont' >   
           <SearchBooks searchValue={searchValue} setSearchValue={setSearchValue 
 }/>     

              {Object.keys(data).filter(filterBooks).length === 0 &&(
               <div>
                <h3>Book not found</h3>
               </div>
                )}
           {Object.keys(data)
             .map((key) => data[key])
             .reduce((acc, curr) => acc.concat(curr), [])
             .filter(filterBooks)
             .map((book) => {          
             return (
             <>       
              <div  className='search__books'
                onClick={() => {
                  history.push("/book/id", { book }); setSearchValue('')
                }}
               >            
                {" "}
                {book.bookName}{" "}
              </div>            
            </>
          );
        })}
           </div>
    )
}

export default Search
1
mura1 3 April 2021, 22:07

1 menjawab

Jawaban Terbaik

Sesuatu seperti ini:

return book.length === 0 ? (
    <div>
      <h1>No items has been found </h1>
    </div>
) : (
    <div className='search__books'> ... </div>
);

Ini disebut a