title: Limiting the max number of items being searched
body: <p>So the thing I want to achieve is this. I want to display max of 10 items per search, so whenever I type a word it only displays 10 items. Right now it is displaying a nice amount. I have tried something am I on the right path</p>
  <pre><code>import React,{useState, useEffect, useRef, useContext}from 'react'
  import {FaSearch} from 'react-icons/fa'
  import { 
      Link, useHistory
    } from &quot;react-router-dom&quot;;
  import { BookContext } from '../../context/books';
  import SearchBooks from './SearchBooks';
  
  const Search = () =&gt; {
  
    const {data}= useContext(BookContext)
    const [searchValue, setSearchValue] = React.useState('');
    const history= useHistory()
    const ref=useRef()
    function filterBooks(book) {
      console.log(book);
      if(!searchValue.length ) return book.bookName &lt; 10
      if (!searchValue.length  ) return false;
      return book.bookName?.toLowerCase().includes(searchValue.toLowerCase());
    }  
  
      return (
          &lt;div className='search__cont' ref={ref}&gt;   
             &lt;SearchBooks searchValue={searchValue} setSearchValue={setSearchValue }/&gt;          
             {Object.keys(data)
               .map((key) =&gt; data[key])
               .reduce((acc, curr) =&gt; acc.concat(curr), [])
               .filter(filterBooks)
               .map((book) =&gt; {          
               return (
               &lt;&gt;       
                &lt;div  className='search__books'
                  onClick={() =&gt; {
                    history.push(&quot;/book/id&quot;, { book }); setSearchValue('')
                  }}
                 &gt;            
                  {&quot; &quot;}
                  {book.bookName}{&quot; &quot;}
                &lt;/div&gt;            
              &lt;/&gt;
            );
          })}
             &lt;/div&gt;
      )
  }
  
  export default Search
  </code></pre>