title: How to filter data in react?
body: <p>I have got series of data that contains some objects in one array(json file) and it will be shown by react </p>
  
  <pre><code>    class App extends React.Component {
       constructor(props){
       super(props);
        this.state = {
         data: [],
             .
             .
             .
      currentPage: 1,
      itemsPerPage: 20,
      value: '',
      startIndex : 0,
      endIndex : 4,
          }}}
  
  [{'id': '5c0b6cd9e1382352759fbc25', 'hotelinfo': {'hotelsearch': {'realname': 'Korston Hotel Moscow'}},{'id': '5c0b6cd9e1382352759fbc24', 'hotelinfo': {'hotelsearch': {'realname': 'Lavanta Hotel'}},{'id': '5c0b6cd9e1382352759fbc28', 'hotelinfo': {'hotelsearch': {'realname': 'Stanpoli Hotel'}}]
  </code></pre>
  
  <p>IS it possible to write something like this <strong>postsql="select * where realname like '%Korston%'"</strong> to filter data to show just this json file? </p>
  
  <pre><code>    [{'id': '5c0b6cd9e1382352759fbc25', 'hotelinfo': {'hotelsearch': {'realname': 'Korston Hotel Moscow'}}]
  </code></pre>
  
  <p>Edit :</p>
  
  <p>There is a paging which displays 4 pages by default and show the rest of pages by clicking next button. </p>
  
  <pre><code>render() {
  const { data, currentPage, itemsPerPage,startIndex,endIndex } = this.state;
  const indexOfLastItem = currentPage * itemsPerPage;
  const indexOfFirstItem = indexOfLastItem - itemsPerPage;
  const currentItems = data.slice(indexOfFirstItem, indexOfLastItem);
  const renderHotel = currentItems.sort((a, b) =&gt; a.total - b.total).map((item, i) =&gt; {
  return  &lt;div class="item"&gt;
           &lt;span&gt;{item.hotelinfo.hotelsearch.realname}&lt;/span&gt;
       &lt;/div&gt;
  });
   const pageNumbers = [];
  for (let i = 1; i &lt;= Math.ceil(data.length / itemsPerPage); i++) {
  pageNumbers.push(i);
  }
  
   const renderPageNumbers = pageNumbers.slice(startIndex, endIndex).map(number =&gt; {
   return (
   &lt;li className={(this.state.currentPage === number ? 'active ' : '') + 'controls'}
  key={number}
  id={number}&gt;
   {number}
   &lt;/li&gt;
   )});
    return (
    &lt;div&gt;
     &lt;input type="text" value={this.state.value} 
      onChange={this.handleInputChange} class="hotelName" /&gt;&lt;span onClick=this.handleSearch} class="searchbtn"&gt;search&lt;/span&gt;
     {renderHotel}
     &lt;ul id="page-numbers" class="pagenumDef"&gt;
       &lt;li onClick={this.decremant} class="nexprev"&gt;
       &lt;span class="fa-backward"&gt;&lt;/span&gt;&lt;/li&gt;
       {renderPageNumbers}
      &lt;li onClick={this.increment} class="nexprev"&gt;&lt;span class="fa-forward"&gt;&lt;/span&gt;&lt;/li&gt;
     &lt;/ul&gt;
    &lt;/div&gt;
   )};
  </code></pre>
  
  <p>As you know I have an input(class="hotelName") which user start to type in (e.g user type 'Korston' ) and click a button and new result should just contain the data of hotels those contain 'Korston' name.</p>
  
  <pre><code>  handleInputChange(event) {
        this.setState({ value: event.target.value });
     }
    getObj = obj =&gt; {
    let newString = [];
    let returnString = "";
    let inputval = this.state.value
     inputval = inputval.toLowerCase()
    .split(' ')
    .map((s) =&gt; s.charAt(0).toUpperCase() + s.substring(1))
    .join(' ');
    const { data } = this.state;
  
    data.map(item =&gt; {
    const checkString = item.hotelinfo.hotelsearch.realname;
    newString = checkString.split(" ");
    if (newString.includes(inputval)) {
      returnString = checkString;
    }});
  
  return obj.hotelinfo.hotelsearch.realname === returnString;
  }; 
  handleSearch = () =&gt; {
   const { data } = this.state;
   const filteredItems = data.filter(this.getObj);
   if (filteredItems.length === 0) {
   return false
   }else{
      return this.setState({data : eval(filteredItems)}, () =&gt; console.log("ITEMS : ",this.state.data) )
  //In this part new data will be replaced by default data and the number of default Items is 400. By filtering in this part console.log show me 100 items.For the text search the filtering will be done among 100 result not 400 result.I want every search be done among 400 items that is my default number of item. 
    }
  }; 
  </code></pre>