title: Reactjs Instant search
body: <p>I have a JSON schema which I'm mapping through the page and then rendering. Now I want to filter through an only search query and render only the search results.</p>
  
  <p><code>Listing.jsx</code></p>
  
  <pre><code>    &lt;div id="searchbar"&gt;
        &lt;Hero&gt;
          &lt;Section&gt;
            &lt;Container&gt;
              &lt;Heading style={{ color: "white" }}&gt;SEARCH&lt;/Heading&gt;
              &lt;Field&gt;
                &lt;Control&gt;
                  &lt;Input
                    onChange={this.onChangeSearch}
                    name="query"
                    type="text"
                    placeholder="Enter query"
                    value={query}
                  /&gt;
                &lt;/Control&gt;
              &lt;/Field&gt;
            &lt;/Container&gt;
          &lt;/Section&gt;
        &lt;/Hero&gt;
      &lt;/div&gt;
  &lt;div&gt;
  {pageItems.map(data =&gt; (
              &lt;div key={data.id}&gt;
                {data.status === true ? (....) : (...)}&lt;/div&gt;}
  </code></pre>
  
  <p>How can I show only relevant search results in instant search/real-time search?</p>
  
  <p>As per comments/suggestions, I'd like the search based on a specific array or entire JSON object to search.</p>
  
  <p>This is my <code>onChange</code> event which returns the whole JSON object in the console.</p>
  
  <pre><code>  onChangeSearch = evt =&gt; {
      this.setState({
        [evt.target.name]: evt.target.value
      });
  
      this.state.items.map(data =&gt; {
        return console.log(data);
      });
    };
  </code></pre>